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下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
jQuery代码优化 事件委托篇
Nov 01 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 Javascript
js实现验证码干扰(动态)
Feb 23 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 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
javascript中join方法实例讲解
2019/02/21 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
Python使用MONGODB入门实例
2015/05/11 Python
编写Python CGI脚本的教程
2015/06/29 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
美国在线家装零售商:Build.com
2016/09/02 全球购物
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
品学兼优的大学生自我评价
2013/09/20 职场文书
电气专业应届生求职信
2013/11/01 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
职务说明书范文
2014/05/07 职场文书
会计演讲稿范文
2014/05/23 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
小学师德师风整改措施
2014/10/27 职场文书
中英文求职信范文
2015/03/19 职场文书
复活读书笔记
2015/06/29 职场文书
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python