Vue.js 循环语句 v-for指令
Vue.js循环使用 v-for 指令。v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。注意：v-for循环的时候，key属性只能使用number或String。key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值。在组件中使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须
·
Vue.js循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
注意：
- v-for循环的时候，key属性只能使用number或String。
- key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值。
- 在组件中使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的 字符串/数字 类型 :key值。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id='app'>
<!--对象和索引值写法是自定义的，注意顺序-->
<!--v-for循环普通数组 -->
<p v-for="(item,index) in List">索引值---{{i}} 每一项---{{item}}</p>
<br/>
<!--v-for循环对象数组-->
<p v-for="(Obj,i) in ListObj">id---{{Obj.index}} 姓名---{{Obj.name}}</p>
<br/>
<!--注意，在遍历对象的键值对的时候，除了有 val 和 key,在第三个位置还有一个索引-->
<p v-for="(val,key) in User">键是---{{key}} 值是---{{val}}</p>
<br/>
<!-- in 后面我们放过数组、对象数组、对象，还可以放数字-->
<!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始-->
<p v-for="count in 10">第---{{count}}---次循环</p>
</div>
</body>
<script src="vue.min.js"></script>
<!--在线测试替换<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
<script>
var vm = new Vue({
el:'#app',
data:{
List:[1,2,3],
List_Obj:[
{index:1, name:'Mr1'},
{index:2, name:'Mr2'},
{index:3, name:'Mr3'}
],
User:{
id:1,
age: 20,
name:'Vue指令',
gender:'男'
}
}
});
</script>
</html>
输出的结果参考
索引值--- 每一项---1
索引值--- 每一项---2
索引值--- 每一项---3
键是---id 值是---1
键是---age 值是---20
键是---name 值是---Vue指令
键是---gender 值是---男
第---1---次循环
第---2---次循环
第---3---次循环
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献7条内容
所有评论(0)