使用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 相关文章推荐
JS 日期验证正则附asp日期格式化函数
Sep 11 Javascript
js操作ajax返回的json的注意问题!
Feb 23 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
jquery实现的横向二级导航效果代码
Aug 26 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
详解小程序循环require之坑
Mar 08 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
详细谈谈JavaScript中循环之间的差异
Aug 23 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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
PHP中读写文件实现代码
2011/10/20 PHP
php判断变量类型常用方法
2012/04/24 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
Python selenium如何设置等待时间
2016/09/15 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
美国折扣宠物药房:Total Pet Supply
2018/05/27 全球购物
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
社团招新策划书
2014/02/04 职场文书
2014组织生活会方案
2014/05/19 职场文书
金融保险专业求职信
2014/09/03 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript