Vue 里面包装了几个方法,可以去修改数组,这些方法会触发更新视图的动作 .. 我们在浏览器的控制台上去试一下这些方法 .. 现在我想在这个列表的底部添加一个新的项目,可以用 push 方法 ... 也就是这个项目会在 awesome 这个项目的下面出现 ...
vm.items.push ... 设置一下要添加的项目 .. 一个对象,里面添加一个 text 属性 ... 再设置一下它的值 ...
vm.items.push({text: 'amazing'})
你会发现,新添加的这个项目会出现的列表的底部 .. 如果你想把添加的项目放到列表的最前面,可以用 unshift 这个方法 ..
vm.items.unshift({text: 'wonderful'})
这个 wonderful 会在列表的最前面显示 ...
reverse 方法可以颠倒这个列表的顺序 ... 用一下这个方法 ... 你会看到之前在最下面的项目现在会跑到最上面来 ...
如果想删除掉列表里的最前面这个项目,可以用一下 shift 这个方法 .. 注意这个 amazing 会被删除掉 ... 执行一下 ...
vm.items.shift()
想要删除的如果是最后一个项目,这里就是这个 wonderful ... 可以使用 pop 方法 ... 再用一下这个方法 ... 这样最后的项目就被删除掉了 ..
vm.items.pop()
还有个 splice 方法,可以在指定的地方添加或者删除项目 ... 比如现在我想在显示 great 的这个位置上插入一个新的项目 ... 这个位置的序号是 1 ... 用一下 splice 方法,先设置一下开始的位置 ... 这里就是 1 ... 然后是要删除的项目的数量,我现在不想删除项目,只想插入新的项目,可以把这个参数的值设置成 0 ..
然后是要插入的新的项目 ... 一个对象 .. 添加一个 text 属性,再设置一下它的值 ... 执行一下 ... 你会看到,这个新的项目会出现在原来的 great 这个项目的位置上,也就是序号是 1 的这个地方 ...
现在我要替换掉 great 这个项目,可以这样 .. 用一下 splice 方法 .. 开始的位置是 2 .. 然后删除一个项目 ... 把这个要删除的项目的数量设置成 1 ... 再设置一下要添加的项目 ...
注意这个 great 项目会被这个 wonderful 替换掉 ... 执行一下 ... 之前的 great ,就变成了现在的 wonderful ...