<div id="app">
<ul>
<template v-for="i in items">
<li>Index is {
{$index}}</li>
<li>Content is {
{i}}</li>
</template>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
items: {
a: "1",
b: "2",
c: "3"
}
}
})
</script>
监视数组变动(修改数组)
当data的某个属性是一个数组时,用v-for可以遍历,但显然数组是可能变动的,因此对以下变动也进行数据绑定;
push() 数组末尾添加
pop() 数组末尾取出
shift() 数组开头取出
unshift() 数组开头添加
splice() 删除并插入
sort() 排序
reverse() 数组顺序颠倒
当利用以上方法变更数组时,被渲染的内容会实时更新;
采用reverse() 实现数组倒序排列