<body>
<div id="app">
<ul>
<li v-for='item in arrNames'>{{item}}</li><!--遍历数组-->
<li v-for='(item, index) in arrNames'>{{item + '---' + index}}</li><!--遍历数组,index是下标-->
<li :key='item.id' v-for='(item, index) in objNames'><!--key的作用:帮助Vue区分不同的元素,从而提高性能-->
<span>{{item.ename}}</span>
<span>-----</span>
<span>{{item.cname}}</span>
</li>
</ul>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
循环结构-遍历数组
*/
var vm = new Vue({
el: '#app',
data: {
arrNames: ['wang', 'wei'],
objNames: [{
id: 1,
ename: 'wang',
cname: '王'
},{
id: 2,
ename: 'wei',
cname: '魏'
}]
}
});
</script>
</body>
vue 指令 v-for 遍历数组
最新推荐文章于 2023-07-10 21:46:09 发布