Vue.set()实现数据动态响应
在vue里面,我们操作最多的就是各种数据,在jquery里面,我们习惯通过下标定向找到数据,然后重新赋值
比如var a[0]=111;(希望上家公司原谅菜鸟的我写了不少这样的代码)
下面上代码
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/vue.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="item in listData">{{item}}</li> </ul> <a href="javascript:void(0)" v-text="he" @click="changeData()"></a> </div> </body> <script> new Vue({ el:"#app", data:{ he:"点我", listData:["a","b","c"] }, methods:{ changeData () { this.listData[0]="d"; } } }) </script> </html>
当我点击按钮时候,发现没有任何变化,页面上还是a,b,c
vue当然不会这么菜呢
下面是伟大的vue内置的方法来了
Vue.set() 官方解释: 设置对象的属性。如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。
我的理解就是触发视图重新更新一遍,数据动态起来
Vue.set(a,b,c)
a是要更改的数据 b是数据的第几项 c是更改后的数据
解决上面数据不能更改后的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/vue.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="item in listData">{{item}}</li> </ul> <a href="javascript:void(0)" v-text="he" @click="changeData()"></a> </div> </body> <script> new Vue({ el:"#app", data:{ he:"点我", listData:["a","b","c"] }, methods:{ changeData () { Vue.set(this.listData,0,'X') } } }) </script> </html>
我们可以看到,this.listData数组的第一项已经被更改了
原文发布时间为:2018年02月07日
原文作者:不负好时光
本文来源:开源中国 如需转载请联系原作者
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
人工智能时代最稀缺的是人才?
一张李开复与徐小平四目对视的照片,让李开复在微博、微信朋友圈上刷屏了。这是2017年3月4日李开复在三亚出席一场活动中被摄影师抓拍到的照片,当天他在大会上的演讲主题是“我不是李开复,我是人工智能”。周志华教授2017年提出了“深度森林”,吸引了很多研究者的关注,人工智能产业发展最核心的要素是什么?周教授认为真正需要的是人才。 入行人工智能该读什么书?文末下方小编精选了人工智能领域必需书单,今天京东购书,畅享5折封顶,叠加99元减20元现金券,算下来不到4折,够划算吧,不仅如此,文末留言你想要读的人工智能图书,我们将选出2名读者赠送一本,仅限今日哦。 图1:李开复和徐小平四目对视,被网友加上“台词”(图片来源:投资界供图) 周志华教授2017年提出了“深度森林”,吸引了很多研究者的关注,这是一种基于决策树森林而非神经网络的深度学习模型。本月,周志华团队又提出了多层梯度提升决策树模型,它通过堆叠多个回归 GBDT 层作为构建块,并探索了其学习层级表征的能力。此外,与层级表征的神经网络不同,他们提出的方法并不要求每一层都是可微,也不需要使用反向传播更新参数。因此,多层分布式表征学习不仅有深度...
- 下一篇
JavaScript 设计模式之单例模式
1.单例模式 单例就是保证一个类只有一个实例,实现方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。 单例模式的思路是:一个类能返回一个对象的引用(并且永远是同一个)和一个获得该实例的方法(静态方法,通常使用 getInstance 名称)。那么当我们调用这个方法时,如果类持有的引用不为空就返回该引用,否者就创建该类的实例,并且将实例引用赋值给该类保持的那个引用再返回。同时将该类的构造函数定义为私有方法,避免其他函数使用该构造函数来实例化对象,只通过该类的静态方法来得到该类的唯一实例 实现1: 最简单的对象字面量 var singleton = { attr : 1, method : function(){ return this.attr; } } var t1 = singleton ; var t2 = singleton ; 那么很显然的, t1 === t2 。 十分简单,并且非常使用,不足之处在于没有什么封装性,...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- 设置Eclipse缩进为4个空格,增强代码规范
- CentOS6,CentOS7官方镜像安装Oracle11G
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- SpringBoot2全家桶,快速入门学习开发网站教程
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- MySQL8.0.19开启GTID主从同步CentOS8