vue2之v-for 指令：循环数组，生成列表
发布：智码IT网 阅读：
<!--
v-for 指令：循环数组，生成列表
-->
<div id="app">
<!-- 循环去除数组的item -->
<ul>
<li v-for="item in arr">{{ item }}</li>
</ul>
<!-- 循环去除数组的item，并且加上序号 -->
<ul>
<li v-for="(item,index) in arr">{{index+1}}、{{item}}</li>
</ul>
<!-- 使用复杂的数据类型 -->
<select>
<option v-for="(item,index) in persons" :value="idem">{{index+1}}、{{item.name}}</option>
</select>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.common.dev.min.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
arr: ["苹果", "香蕉", "西红柿"],
persons:[
{name:"路人甲",age:10},
{name:"路人乙",age:12},
{name:"路人并",age:13},
]
},
});
</script>
效果：
上一篇：没有了
下一篇：没有了