VUE新增属性-数据更新页面不更新

问题：数据更新变化，页面不发生变化，但是控制台可以打印

原因：当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