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 相关文章推荐
Javascript操纵Cookie实现购物车程序
Nov 23 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 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
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
PHP6新特性分析
2016/03/03 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
说一说Python logging
2016/04/15 Python
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
Django实现跨域请求过程详解
2019/07/25 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
车队司机自我鉴定
2014/03/02 职场文书
计划生育证明书写要求
2014/09/17 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
初中英语教学反思范文
2016/02/15 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书