vue.js实现数据动态响应 Vue.set的简单应用


Posted in Javascript onJune 15, 2017

在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.js实现数据动态响应 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)" 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>

vue.js实现数据动态响应 Vue.set的简单应用

我们可以看到,this.listData数组的第一项已经被更改了

X

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
javascript中sort() 方法使用详解
Aug 30 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 Javascript
vue实现全选、反选功能
Nov 17 #Javascript
vue中将网页打印成pdf实例代码
Jun 15 #Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 #Javascript
Angularjs为ng-click事件传递参数
Jun 15 #Javascript
详解原生js实现offset方法
Jun 15 #Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 #Javascript
微信小程序canvas写字板效果及实例
Jun 15 #Javascript
You might like
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
javascript delete 使用示例代码
2010/03/29 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
python环境下安装opencv库的方法
2020/03/05 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
Django通过json格式收集主机信息
2020/05/29 Python
浅谈Python 函数式编程
2020/06/20 Python
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
构造方法和其他方法的区别
2016/04/26 面试题
门卫工作岗位职责
2013/12/17 职场文书
团代会主持词
2014/04/02 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
法人代表证明书
2014/09/18 职场文书
2015年环卫工作总结
2015/04/28 职场文书
刑事撤诉申请书
2015/05/18 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android