VUE中v-for循环四种数据，以及相关参数顺序，以及v-for的注意
事项
vue中的v-for可以循环四种数据，分别是，数字，字符串，数组，对象
⾸先，v-for是属性，是对元素属性的扩展。记得，是v-for=""，⽽不是 v-for:"".
接着，在v-for属性的值是表达式，⾥⾯的参数，⽤逗号，⽽不是⽤空格隔开。
⼀：v-for循环数字
<li v-for='num in 10'>{{ num }}</li>
⼆：v-for循环字符串
<li v-for="str in 'haha'">{{ str }}</li>
三：v-for循环数组
<div id="test">
<ul>
<li v-for='(item,index) in arr'>{{ item }}---{{ index }}</li>
</ul>
</div>
<script>
const vm = new Vue({
el: "#test",
data: {
arr: ['apple', 'orange', 'banana'],
}
})
</script>
上⾯的item，index是语义化的写法，不是固定的，可以是a,b,c这样的，顺序就是数组内容，数组索引
四：v-for循环对象
<div id="test">
<ul>
vue逗号分割的字符串转数组<li v-for='(value,key,index) in obj'>{{ value }}---{{ key }}---{{ index }}</li>
</ul>
</div>
<script>
const vm = new Vue({
el: "#test",
data: {
obj: {
name: "zhangsan",
age: 18,
sex: '男'
}
}
})
</script>
第⼀个是值，第⼆个是键，第三个是索引
关于数组和对象中参数顺序的解释
1.所有的循环，⾸要⽬的都是为了获取元素的值
2.其次是元素的键
3.最后是元素的索引
可以依靠这个规则来记忆参数的顺序

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。