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 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
javascript实现图片切换的幻灯片效果源代码
Dec 12 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
Apr 10 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
js实现简单的计算器功能
Jan 16 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 Javascript
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
php 短链接算法收集与分析
2011/12/30 PHP
yii框架中的Url生产问题小结
2012/01/16 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
PHP echo()函数讲解
2019/02/15 PHP
php解决安全问题的方法实例
2019/09/19 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
python字符串string的内置方法实例详解
2018/05/14 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
python定时截屏实现
2020/11/02 Python
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
环境科学专业个人求职的自我评价
2013/11/28 职场文书
北京大学自荐信范文
2014/01/28 职场文书
社区庆中秋节活动方案
2014/02/07 职场文书
亲子活动总结
2014/04/26 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
趵突泉导游词
2015/02/03 职场文书
超市收银员岗位职责
2015/04/07 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python