使用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小框架 fly javascript framework
Nov 26 Javascript
JavaScript小技巧 2.5 则
Sep 12 Javascript
jQuery 常见操作实现方式和常用函数方法总结
May 06 Javascript
jQuery代码优化 事件委托篇
Nov 01 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 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
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
jquery弹出框的用法示例(2)
2013/08/26 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
jQuery.parseJSON()函数详解
2019/02/28 jQuery
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
python计算N天之后日期的方法
2015/03/31 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
wxpython绘制音频效果
2019/11/18 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
我未来的职业规划范文
2014/01/11 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
小学总务工作总结
2015/08/13 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书