一、回顾
上一次学习了通过属性绑定为元素添加样式,今天主要学习v-for指令的迭代操作。
二、v-for指令学习
学习代码如下:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue学习</title>
</head>
<body>
<div id="app">
<!-- 遍历数组 -->
<p v-for="elem in arr">{{ elem }}</p>
<!-- 遍历数组,同时获取数组的索引 -->
<p v-for="(elem, i) in arr">元素为:{{ elem }} + 索引为:{{ i }}</p>
<!-- 遍历对象数组 -->
<p v-for="user in userArr">名字为:{{ user.name }} + 年龄为:{{ user.age }}</p>
<!-- 遍历对象 -->
<p v-for="(v , k, i) in obj">{{ k }} : {{ v }} + 索引为:{{ i }}</p>
<!-- 遍历迭代数字,从1开始 -->
<p v-for="num in 10">{{ num }}</p>
</div>
<script src="../js/vue2.6.10.js"></script>
<script>
//创建vue实例
var vm1 = new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5,6],
userArr: [
{name: "笑笑", age: 666},
{name: "嘻嘻", age: 888}
],
obj: {
name: "笑笑obj",
gender: "男"
}
},
methods: {
}
});
</script>
</body>
</html>
另外注意一点,使用v-for迭代时,可以绑定一个key属性,该属性用于确定元素的唯一性,必须为string/number类型,如下:
<p v-for="num in 10" :key="num">{{ num }}</p>