问题:数据更新变化,页面不发生变化,但是控制台可以打印 原因:当vue的data里面声明或者已经赋值过的对象或数组时,向对象中添加新的属性,如果更新此属属性的值,是不会更新视图的 1.使用Vue.set(target,key.value) target:要更改的数据源(数组或对象) key:要更改的具体数据(索引) value:重新赋的值 使用方法问题:数据更新变化,页面不发生变化,但是控制台可以打印原因:当vue的data里面声明或者已经赋值过的对象或数组时,向对象中添加新的属性,如果更新此属属性的值,是不会更新视图的1.使用Vue.set(target,key.valu...
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新增属性-数据更新页面不更新
基础教程推荐
猜你喜欢
- Ajax+smarty技术实现无刷新分页 2022-12-15
- JS滚动到顶部踩坑解决记录 2023-07-10
- 关于Ajax跨域问题及解决方案详析 2023-02-23
- Javascript Bootstrap的网格系统,导航栏和轮播详解 2023-08-11
- Ajax发送和接收请求 2022-12-15
- 使用ajax跨域调用springboot框架的api传输文件 2023-02-23
- cocos creator游戏实现loading加载页面,游戏启动加载动画 2022-10-29
- 在实战中可能碰到的几种ajax请求方法详解 2023-02-01
- uniapp开发微信小程序自定义顶部导航栏功能实例 2022-10-21
- HTML clearfix清除浮动讲解 2022-11-20