问题:数据更新变化,页面不发生变化,但是控制台可以打印原因:当vue的data里面声明或者已经赋值过的对象或数组时,向对象中添加新的属性,如果更新此属属性的值,是不会更新视图的1.使用Vue.set(target,key.valu...
问题:数据更新变化,页面不发生变化,但是控制台可以打印
原因:当vue的data里面声明或者已经赋值过的对象或数组时,向对象中添加新的属性,如果更新此属属性的值,是不会更新视图的
1.使用Vue.set(target,key.value)
target:要更改的数据源(数组或对象)
key:要更改的具体数据(索引)
value:重新赋的值
使用方法
data(){
return {
obj:{
id:"1"
}
}
}
this.$set(this.obj,'name','hehe')
2.使用Object.assign() Object.assign()方法用于将所有可枚举属性的值从一个或者多个源对象复制到目标对象,它将返回目标对象 this.obj = Object.assign({},this.obj,{name:"hehe"}) 3.使用lodash的clone方法 this.obj.name = 'hehe' this.obj = _.clone(this.obj) 4.使用$fourceUpdate() 迫使Vue实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有的子组件 this.obj.name="hehe" this.$fourceUpdate() ? js截取两个字符中间的内容 var str= "aaabbbcccdddeeefff" str = str.match(/aaa(\S*)fff/)[1] console.log(str) //bbbcccdddeee 截取字符串前面的内容 var str= "aaabbbcccdddeeefff" str = str.match(/(\S*)fff/)[1] console.log(str) //aaabbbcccdddeee 截取字符串后面的内容 var str= "aaabbbcccdddeeefff" str = str.match(/aaa(\S*)/)[1] console.log(str) //bbbcccdddeeefff
沃梦达教程
本文标题为:VUE新增属性-数据更新页面不更新
基础教程推荐
猜你喜欢
- CSS3的几个标签速记(推荐) 2024-04-07
- js禁止页面刷新与后退的方法 2024-01-08
- Ajax实现动态加载数据 2023-02-01
- this[] 指的是什么内容 讨论 2023-11-30
- 浅析canvas元素的html尺寸和css尺寸对元素视觉的影响 2024-04-26
- vue离线环境如何安装脚手架vue-cli 2025-01-19
- 基于Vue制作组织架构树组件 2024-04-08
- JS前端广告拦截实现原理解析 2024-04-22
- 关于文字内容过长,导致文本内容超出html 标签宽度的解决方法之自动换行 2023-10-28
- 浅谈Vue2和Vue3的数据响应 2023-10-08
