这次给大家带来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,看个例子:
关于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/,进入注册账号界面不用重 ...