Vue.set()实现数据动态响应的方法


Posted in Javascript onFebruary 07, 2018

在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)" rel="external nofollow" rel="external nofollow" 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.set()实现数据动态响应的方法

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)" rel="external nofollow" rel="external nofollow" 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数组的第一项已经被更改了

Vue.set()实现数据动态响应的方法

总结

以上所述是小编给大家介绍的Vue.set()实现数据动态响应的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用Javascript接收get传递的值的代码
Nov 30 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
解决vue打包项目后刷新404的问题
Mar 06 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 #Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 #Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 #Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 #Javascript
详解JS数值Number类型
Feb 07 #Javascript
vue几个常用跨域处理方式介绍
Feb 07 #Javascript
vue项目中axios使用详解
Feb 07 #Javascript
You might like
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
PHP 万年历实现代码
2012/10/18 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
python搭建简易服务器分析与实现
2012/12/15 Python
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
Python中http请求方法库汇总
2016/01/06 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
利用numpy实现一、二维数组的拼接简单代码示例
2017/12/15 Python
python中数据库like模糊查询方式
2020/03/02 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
工业自动化毕业生自荐信范文
2014/01/04 职场文书
高三高考决心书
2014/03/11 职场文书
2014组织生活会方案
2014/05/19 职场文书
公安学专业求职信
2014/07/27 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
信用卡工资证明范本
2014/10/17 职场文书
python中__slots__节约内存的具体做法
2021/07/04 Python
英镑符号 £
2022/02/17 杂记