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>