1. 在vue中,如果要对vue中的数组或是集合循环赋值显示到界面上可以使用v-for标签
1.1 代码(v-for对数组进行循环赋值)
{{arr}}
<!-- 如果自己手写的话 -->
<ul>
<li>{{arr[0]}}</li>
<li>{{arr[1]}}</li>
<li>{{arr[2]}}</li>
</ul>
<!-- 通过v-for来循环 -->
<hr>
<ul>
<!-- 含义循环数组,把每一项赋值给item -->
<li v-for="item in arr">{{item}}</li>
</ul>
<script>
new Vue({
el: "#app",
data: {
arr: [111,222,333],//数组
}
}
})
</script>
1.2 显示效果
1.3 代码(v-for对象进行循环赋值)
<!-- 循环对象 -->
{{obj}}
<ul>
<!-- 含义循环对象,把每一项赋值给item -->
<li v-for="item in obj">{{item}}</li>
</ul>
<script>
new Vue({
el: "#app",
data: {
obj: {//对象
name: "微风",
age: 22,
sex: "男"
}
}
}
})
</script>
1.4 显示效果
2.如果我们想拿到其下标的值或对象的key值,通过如下方式可以拿到每一个的下标值或key值
2.1 代码
<!-- 想知道数组中下标的值 -->
<ul>
<!-- 含义循环数组,把每一项赋值给item -->
<!-- index代表的是其下标 -->
<li v-for="(item,index) in arr">{{index+"->"+item}}</li>
</ul>
<hr>
<!-- 想知道对象的key值 -->
<ul>
<!-- 含义循环对象,把每一项赋值给item -->
<li v-for="(item,key) in obj">{{key}}:{{item}}</li>
</ul>