V-for和key属性
a) 遍历数组，参数(item,index) in list
b) 遍历对象，参数(value,key,index) in list
c) 遍历数字，num in 10 (1~10)
d) key在使用v-for的时候都需要去设置key
i. 让界面元素和数组里的每个记录进行绑定
ii. key只能是字符串或者数字
iii. key必须是唯一的
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/jquery/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<!-- 遍历数组 -->
<ul>
<li v-for="(item,index) in list">{{index}}{{item}}</li>
</ul>
<!-- 遍历对象 -->
<ul>
<li v-for="(value,key,index) in person">
{{value}}
{{key}}
{{index}}
</li>
</ul>
<!-- 遍历数组对象 -->
<ul>
<li v-for="(item2,index2) in courseList">
{{item2.courseTitle}}
</li>
</ul>
<!-- 遍历数字 -->
<ul>
<li v-for="index in 10">
{{index}}
</li>
</ul>
</div>
</body>
<script>
const vm = new Vue({
el: "#app",
data: {
list: ["a", "b", "c"],
person: { name: "zs", age: 18 },
courseList: [
{ courseTitle: "web" }, { courseTitle: "java" }
]
},
methods: {},
});
</script>
</html>
结果
