<div id="app">
<ul>
<li v-for="book in books" :key="book.author">
{{book.name}}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
books: [
{
name: 'Vue',
author: 'zs'
},
{
name: 'react',
author: 'ls'
},
{
name: 'angular',
author: 'ww'
}
]
}
})
</script>
对象属性也可以遍历
<div id="app">
<ul>
<li v-for="(value,key,index) in user">
{{index}} - {{key}} :{{value}}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
user: {
name: 'Aresn',
gender: '男',
age: 16
}
}
})
</script>
数组更新
Vue的核心是数据与视图的双向绑定,当我们修改数组时,Vue会检测数据变化,所以用v-for渲染的视图也会立即更新,Vue包含了一组观察数组变异的方法,使用它们改变数组也会触发视图更新:
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()