使用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 相关文章推荐
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 Javascript
vue实力踩坑之push当前页无效
Apr 10 Vue.js
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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
PHP 模板高级篇总结
2006/12/21 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
Python实现全角半角转换的方法
2014/08/18 Python
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
Python base64编码解码实例
2015/06/21 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
阅兵口号
2014/06/19 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
党员个人党性分析材料
2014/12/18 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
信用卡收入证明范本
2015/06/12 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
Mysql忘记密码解决方法
2022/02/12 MySQL