vue.js 数据替换_Vue.js的列表数据的同步更新方法

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

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

filter(),concat(),slice()等不会触发列表的更新!

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

1.为数组的某一项赋值 vm.items[indexOfItem] = newValue,

2.改变数组的长度 vm.items.length = newLength也不会触发列表的更新!

要实现的效果:

列表数据的更新

代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

• {{item.name +'-' + item.price}}     

addItem

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

1

2

3

4

5

6

7

8

methods: {

addItem () {//      把数组的第 1 个替换成新的值

Vue.set(this.list, 1, {

name:'pinaapple',

price: 256

})

}

}

效果图:

文章来源：http://www.php.cn/js-tutorial-388258.html

Vue.js根据列表某列值更新filter

Atitit vue.js 把ajax数据 绑定到form表单

Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...

vue.js 同级组件之间的值传递方法(uni-app通用)

vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149

Vue.js学习 Item4 -- 数据双向绑定

Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. ...

关于vue.js父子组件数据传递

vue.js中使用props down,events up的原则进行父子组件间的通信,先来记录下props down,看个例子:

&lt ...

关于vue.js中列表渲染练习

html:

使用Vue.js实现列表选中效果

实际项目中,我们会遇到很多类似的需求,一个列表,需要点击其中一条高亮显示.熟悉JQuery的同学说这个太简单了.可以给这个选中的element设置一个active的class.配合Css样式,让ac ...

vue.js 三(数据交互)isomorphic-fetch

至于fetch的介绍,在这里就不多说了,官方和网络上的说明不少 之前使用jquery的Ajax朋友,可以尝试一下使用一下这个新的api 推荐使用isomorphic-fetch,兼容Node.js和浏 ...

随机推荐

[APUE]不用fcntl实现dup2函数功能

dup2的函数定义为: #include int dup2(int src_fd, int new_fd); 自己实现dup2函数有几个关键点: 1,检查给定的源fd ...

JS-纯js制作动态成绩表(流程控制语句+js内置对象)

流程控制for循环+if判断+Math对象+Array对象+Date对象制作成绩表

jquery实时监测手机号是否符合规则，并根据手机号检测结果将提交按钮设为不同状态

功能: 输入手机号,实时判断手机号输入的是否符合规则: 如果不合规则,则提交按钮为禁用状态,手机号信息不可提交,按钮显示灰色背景: 如果符合规则,则可提交所输入的手机号信息,并将按钮背景设成红色. 代 ...

简明 Vim 练级攻略(转)

原文:http://coolshell.cn/articles/5426.html vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类,你一定会 ...

matlab求曲线长度

曲线段在上的弧长为采用积分所求弧长s=∫√(1+y'²)dxmatlab求出各点的导数,然后按照上式积分 clear>> x=1:0.1:10;>> y=rand(1,leng ...

ASP终极防下载(转)

自从搞ASP+ACCESS没少为避免数据库下载而伤过神,网上的奇淫技巧更是数不胜数,本文就是同大家共同探讨各路前辈的留下的秘笈并指中其中的优劣,最后为大家提供一种最佳的解决方案. 一.开篇 自从搞AS ...

号外号外！解决github+hexo+yilia评论插件的问题！！！

先走一波效果图!    本人网站--http://www.wenzheng.club/ ps:效果还是不错的,支持QQ微信登录,支持表情,甚至gif动图评论! 插件采用韩国服务器的来必力评论插件--h ...

IDEA配置Struts框架

对于刚接触编程的同学,对框架只是还不是很了解,本文主要介绍在Idea上配置Struts,实现简单的页面跳转,以及页面参数传递. 在进行代码编写之前先对Idea进行一个简单了解,对于长时间接触编程的,对 ...

Maven的简单使用

Maven使用 在官网下载maven: http://maven.apache.org/download.cgi 解压到D盘(位置随便) 配置环境变量 打开dos窗口,检测是否成功,出现如下画面表示配 ...

Loadrunner 50个Vusers并发创建3000个账号脚本调试以及场景运行

目标:用50个并发用户创建3000个账号到HP Web Server 分析: 1. Vugen录制脚本时,打开首页http://127.0.0.1:1080/WebTours/,进入注册账号界面不用重 ...