vue的data里面的值是数组时,在更改其某一项的时候,怎么触发视图的重新渲染?
1. 设置对象或数组的值:Vue.set(target,key,value) ;
2.删除对象或数组中元素: Vue.delete ( target,key) ;
3. 数组对象直接修改属性,可以触发视图更新:
this.array[0].show = true;
4.splice方法修改数组,可以触发视图更新:
this.array.splice(indexOfItem, 1, newElement)
5.数组整体修改,可以触发视图更新:
var tempArray = this.array;
tempArray[0].show = true;
this.array = tempArray;
6.用Object.assign或lodash.assign可以为对象添加响应式属性,
可以触发视图更新:
7.Vue提供了如下的数组的变异方法,可以触发视图更新:
push()/pop()/shift()/unshift()/splice() /sort()/reverse()
vue的data里面的值是数组时,在更改其某一项的时候,怎么触发视图的重新渲染?的更多相关文章
- vue重置data里的值
this.$options.data() 这个可以获取原始的data值,this.$data 获取当前状态下的data,拷贝重新赋值一下就行了. Object.assign(this.$data, t ...
- Vue中data返回对象和返回值的区别
速记:粗浅的理解是,事件的结果是影响单个组件还是多个组件.因为大部分组件是要共享的,但他们的data是私有的,所以每个组件都要return一个新的data对象 返回对象的时候 <!DOCTYPE ...
- params.row[params.column.key] vue h函数 当前单元格 h函数 div 属性 值或数组 render
params.row[params.column.key] vue h函数 当前单元格 h函数 div 属性 值或数组 render
- Vue 动态修改data 值 并触发视图更新
Vue 动态修改data 值 并触发视图更新 this.$set(obj, key, '') // Vue 动态修改或者添加data key 并触发视图更新
- [转]Vue中用props给data赋初始值遇到的问题解决
原文地址:https://segmentfault.com/a/1190000017149162 2018-11-28更:文章发布后因为存在理解错误,经@Kim09AI同学提醒后做了调整,在此深表感谢 ...
- Vue中用props给data赋初始值遇到的问题解决
Vue中用props给data赋初始值遇到的问题解决 更新时间:2018年11月27日 10:09:14 作者:yuyongyu 我要评论 这篇文章主要介绍了Vue中用props给dat ...
- Vue 父组件传递给子组件,设置默认值为数组或者对象时
在vue 父子组件传参过程中,传递对象或者数组时,设置默认值为{}或者[] 错误写法: props: { pos: { type: [Object, Array], default: []//这是错误 ...
- Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新
一.为什么需要使用Vue.set? vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vu ...
- vue遇到的坑(一)——数组更新
最近在项目中遇到个问题,数组已经更新了,但是页面中的DOM并没有触发变化.我一直以来的想法就是: 既然vue实现的实时数据双向绑定,那么在model层发生了变化之后为什么就没有在view层更新呢? 在 ...
随机推荐
- [原][C++]拒绝智能指针与指针混用,常见智能指针问题
公司一个非专科的程序在开发过程中有些毛躁,但是又想使用些新学的技术 这天他正调试呢,发现有一个BUG怎么也找不到原因. 用的好好的内存怎么就突然被删除了呢,好好的指针,怎么就访问越界了呢 没办法,他只 ...
- shell编程系列1--shell脚本中的变量替换
shell编程系列1--shell脚本中的变量替换 变量替换总结: .${变量#匹配规则} # 从头开始匹配,最短删除 .${变量##匹配规则} # 从头开始匹配,最长删除(贪婪模式) .${变量%匹 ...
- 算法习题---4-7RAID技术(UV509)
一:题目 (一)基础知识补充(RAID和奇偶校验) 磁盘管理—磁盘阵列(RAID)实例详解(本题目常用RAID 5技术实现) 奇偶校验(同行数据中同位上的1的个数,偶校验时:1的个数为偶数则校验结果为 ...
- 报错:(未解决)NoReplicaOnlineException: No replica in ISR for partition __consumer_offsets-8 is alive. Live brokers are: [Set(50, 51, 52)], ISR brokers are: [68]
报错背景: CDH集成kafka插件之后,启动kafka时就报出此错误. 报错现象: -- ::, ERROR state.change.logger: [Controller epoch=] Ini ...
- tp 执行sql 语句
$User = D('User'); $User->query('select * from think_user where status=1'); $User->execute('up ...
- linux中解决出现:^H^H^H^H
解决出现:^H^H^H^H 把stty erase ^H 添加到.bash_profile中 vim /etc/profile stty erase ^H su root source /etc/pr ...
- 如何解决mac brew遇到无法下载的依赖?
使用brew安装软件时,需要下载依赖包,但是如果依赖包特别大的时候,就很容易失败:brew本身不支持断点续传:但是可以使用wget -c的方式断点续传的下载依赖:下载完如何给brew安装使用呢?参考: ...
- popup demo
Django下实现: urls.py: from django.conf.urls import url from django.contrib import admin from app01 imp ...
- Python机器学习基础教程-第2章-监督学习之决策树集成
前言 本系列教程基本就是摘抄<Python机器学习基础教程>中的例子内容. 为了便于跟踪和学习,本系列教程在Github上提供了jupyter notebook 版本: Github仓库: ...
- 微信小程序实战,与后台交互
index.wxml <view class="container"> <text>{{txt}}</text> <input name= ...