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 相关文章推荐
一起来写段JS drag拖动代码
Dec 09 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
详解vue.js的devtools安装
May 26 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 Javascript
如何用JS实现网页瀑布流布局
Apr 24 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中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
python利用Guetzli批量压缩图片
2017/03/23 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
python的scipy实现插值的示例代码
2019/11/12 Python
使用python+whoosh实现全文检索
2019/12/09 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
马来西亚网上购物:Youbeli
2018/03/30 全球购物
汽车专业毕业生自荐信
2013/11/03 职场文书
服务质量承诺书
2014/03/27 职场文书
初三学生评语大全
2014/04/24 职场文书
移交协议书
2014/08/19 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
司机工作自我鉴定
2014/09/19 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
质检员工作总结2015
2015/04/25 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
《梅花魂》教学反思
2016/02/18 职场文书