<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>快速入门</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<!--数组的遍历 index是索引，item是数组的每一项的值-->
<ul id="app">
<li v-for="(item,index) in list">索引对应的值={{item}}======索引={{index}}</li>
</ul>
<script>
new Vue({
el: "#app",
data: {
list: [9, 8, 7, 6, 5, 4]
}
});
</script>
<!--对象的遍历 value是对象的属性对应的值，key是对象的属性-->
<ul id="duixiang">
<li v-for="(value,key) in product">key={{key}}-------value={{value}}</li>
</ul>
<script>
new Vue({
el: "#duixiang",
data: {
product: {id:"1",name:"laowang",age:"18"}
}
});
</script>
<!--集合的遍历 product是集合索引对应的每一项对象的值，index是集合的索引-->
<table id="jihe" border="red 1px solid">
<tr>
<td>序号</td>
<td>编号</td>
<td>名称</td>
<td>价格</td>
</tr>
<tr v-for="(productone,indexone) in products">
<td>index=={{indexone}}, productone.id={{productone.id}}</td>
<td>index=={{indexone}}, productone.name={{productone.name}}</td>
<td>index=={{indexone}}, productone.age={{productone.age}}</td>
<td>index=={{indexone}}, productone.address={{productone.address}}</td>
</tr>
</table>
<script>
new Vue({
el: "#jihe",
data: {
products: [
{id: 1, name: "guangdongsheng", age: "18", address: "广东省"},
{id: 2, name: "zhanjiang", age: "17", address: "湛江市"},
{id: 3, name: "leizhou", age: "16", address: "雷州市"}
]
}
});
</script>
</body>
</html>
版权说明
文章采用： 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。版权声明：未标注转载均为本站原创，转载时请以链接形式注明文章出处。如有侵权、不妥之处，请联系站长删除。敬请谅解！
常见资源合集和破解 fmvvvteih...