Vue.js的列表数据的同步更新方法

来源：动视网责编：小采时间：2020-11-27 20:01:09

Vue.js的列表数据的同步更新方法

Vue.js的列表数据的同步更新方法:这次给大家带来Vue.js的列表数据的同步更新方法，Vue.js列表数据同步更新方法的注意事项有哪些，下面就是实战案例，一起来看一下。数组的 push(),pop(),shift(),unshift(),splice(),sort(),reverse()等都会触发列表的更新;filter(),conc

推荐度：

点击下载本文 文档为doc格式

导读Vue.js的列表数据的同步更新方法:这次给大家带来Vue.js的列表数据的同步更新方法，Vue.js列表数据同步更新方法的注意事项有哪些，下面就是实战案例，一起来看一下。数组的 push(),pop(),shift(),unshift(),splice(),sort(),reverse()等都会触发列表的更新;filter(),conc

这次给大家带来Vue.js的列表数据的同步更新方法，Vue.js列表数据同步更新方法的注意事项有哪些，下面就是实战案例，一起来看一下。

数组的 push(),pop(),shift(),unshift(),splice(),sort(),reverse()等都会触发列表的更新;
filter(),concat(),slice()等不会触发列表的更新!

下面两种情形也不会触发列表数据更新

1.为数组的某一项赋值 vm.items[indexOfItem] = newValue,
2.改变数组的长度 vm.items.length = newLength也不会触发列表的更新!

要实现的效果:

列表数据的更新

代码:

<template>
 <div id="myapp">
 <ul>
 <li v-for="item in list">
 {{item.name + '-' + item.price}} </li>
 </ul>
 <button v-on:click="addItem">addItem</button>
 </div></template><script>
 export default { data: function () { return { list: [
 { name: 'apple', price: 34
 },
 { name: 'banana', price: 56
 }
 ]
 }
 }, methods: { //点击按钮新增push触发列表数据的更新
 addItem () { this.list.push({ name: 'pinaapple', price: 256
 })
 }
 }
 }</script>

为数组的某一项赋值 vm.items[indexOfItem] = newValue不会触发列表数据的更新,那么怎么才能让他更新数据呢? 用Vue的set()方法可以办到.

 methods: {
 addItem () {// 把数组的第 1 个替换成新的值
 Vue.set(this.list, 1, {
 name: 'pinaapple',
 price: 256
 })
 }
 }

效果图:

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

Vue.js的列表数据的同步更新方法

推荐度：

点击下载本文 文档为doc格式

标签：数据 VUE 列表

热门焦点

Vue.js的列表数据的同步更新方法

Vue.js的列表数据的同步更新方法

Vue.js的列表数据的同步更新方法

最新推荐

猜你喜欢

热门推荐