Vue中的v-for遍历循环
1. V-for和key属性
1. 便利数组，参数(item,index) in list
2. 便利对象，参数(value,key,index) in list
3. 便利数字，num in 10 (1~10)
4. key在使用v-for的时候都需要去设置key
4.1 让界面元素和数组里的每个记录进行绑定
4.2 key只能是字符串或者数字
4.3 key必须是唯一的
<body>
<!-- 视图层 -->
<div id="app">
<!-- 插值表达式，可以读取我们的变量 -->
<ul>
<!-- v-for直接加在循环的元素上 -->
<!-- 语法使用形参 in 数组对象 -->
<li v-for="(item,index) in list">{{item.name}}数组的下标索引值{{index}}</li>
</ul>
<h1>迭代对象</h1>
<ul>
<!-- v-for直接加在循环的元素上 -->
<!-- 先是值，后是对象的键 -->
<li v-for="(value,key,index) in user">对象的键：{{key}}，对象的值：{{value}},数组的下标{{index}}</li>
</ul>
<h1>迭代数字</h1>
<ul>
<!-- v-for直接加在循环的元素上 -->
<!-- 先是值，后是对象的键 -->
<li v-for="num in 10">你好</li>
</ul>
<h1>v-for的key</h1>
<button @click='add'>add</button>
<ul>
<!-- key是字符串或者数字 -->
<li v-for='(item,index) in list' :key='item.id'>
<input type="checkbox"> {{item.name}}数组的下标{{index}}
</li>
</ul>
</div>
<!-- 1、引入vue的js，引入js之后他为我们提供了Vue类 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 调度层
var vm = new Vue({
// vue控制的区域
el: '#app',
// data参数存放我们的数据，这一层就是mvvm里的model层
methods: {
add() {
// this.list.push({
// userId: 10,
// name: '新来的'
// })
this.list.unshift({
userId: 10,
name: '新来的'
})
}
},
data: {
message: 'Hello Vue!',
user: {
userId: 19,
name: '测试name',
age: 18
},
list: [{
id: 1,
name: '张三1'
},
{
id: 2,
name: '张三2'
},
{
id: 3,
name: '张三3'
},
{
id: 4,
name: '张三4'
},
{
id: 5,
name: '张三5'
}
]
}
})
</script>
</body>
</html>
