使用Vue.set()方法实现响应式修改数组数据步骤


Posted in Javascript onNovember 09, 2019

在页面中显示数组数据时发现了一个问题,当在methods方法中修改数组数据后,虽然数组已经发生改变,但是改变后的数据并没有渲染到页面上。这是因为在VUE中,如果在实例创建之后添加新的属性或者改变属性到实例上,它将不会触发视图更新。

而Vue.set()方法能够确保响应式对象被创建后仍然是响应式的,同时触发视图更新,动态响应数据的变化。

用法如下:

Vue.set(object,index,value)

object:要更改的数据源(数组或对象)

index:数据的索引(第几项)

value:修改后的值

实例

<div v-for="(item,index) in state">
    <div class="student">
    <span>
     <img src="./../../../assets/icon.jpg">
     <span>小五</span>
    </span>
     <span><button @click="attence(index)">{{item}}</button></span>
    </div>
   </div>

使用Vue.set()方法实现响应式修改数组数据步骤

该页面的考勤情况数据来源于一个数组,点击以后,考勤情况将会发生改变。

data(){
    return{
     id:1,
     state:['未知','未知','未知','未知','未知','未知','未知','未知','未知']
    }
   },
   methods:{
    attence:function(num){
     if(this.state[num]=='未知'){
      Vue.set(this.state,num,'出勤');
     }
     else if(this.state[num]=='出勤'){
      Vue.set(this.state,num,'请假');
     }
     else if(this.state[num]=='请假'){
      Vue.set(this.state,num,'缺勤');
     }
     else if(this.state[num]=='缺勤'){
      Vue.set(this.state,num,'未知');
     }
    }
   }

在这段代码中,数组中的数据初始值全都是未知,点击按钮以后,attence()方法会根据传入的参数改变数组中的值,传入的参数是几就改变第几项的数据。页面将会及时对数据变化作出响应,渲染出来。

使用Vue.set()方法实现响应式修改数组数据步骤

注:该方法也可用来增加数据,只需将第二项的索引值赋为数组的长度,第三项为增加的数据值。

以上这篇使用Vue.set()方法实现响应式修改数组数据步骤就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
Angular实现form自动布局
Jan 28 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
利用JS制作万年历的方法
Aug 16 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 #Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 #Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 #Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 #Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 #Javascript
js实现的在本地预览图片功能示例
Nov 09 #Javascript
vue 取出v-for循环中的index值实例
Nov 09 #Javascript
You might like
第七节--类的静态成员
2006/11/16 PHP
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
javascript实现json页面分页实例代码
2014/02/20 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
python持久性管理pickle模块详细介绍
2015/02/18 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
在Python中增加和插入元素的示例
2018/11/01 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
python实现简易淘宝购物
2019/11/22 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
python中tab键是什么意思
2020/06/18 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
酒店副总经理岗位职责范本
2014/02/04 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
2014年双拥工作总结
2014/11/21 职场文书
毕业赠语大全
2015/06/23 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
springboot用户数据修改的详细实现
2022/04/06 Java/Android
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技