100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > vue数据更新但视图(DOM)不刷新解决办法

vue数据更新但视图(DOM)不刷新解决办法

时间:2021-01-13 16:58:49

相关推荐

vue数据更新但视图(DOM)不刷新解决办法

第一种:强制更新dom

<div v-if="isTrue">{{num}}</div>data(){return {isTrue: true,num: 0}}aa () {this.isTrue = false // 强制刷新视图this.num++this.isTrue = true // 强制刷新视图}

第二种:vue.$set(要操作的对象或数组, 对象key/索引, 修改后的值)

// vue.$set 修改对象或数组的数据主要是添加响应式getter和setter让其拥有数据响应的特性// this.$set( target, propertyName/index, value ) // vue 中this及vue// 例子1: 比如修改name值没有生效this.form.name = "111" // 等同于 ==>const name = "111"this.$set(this.form, 'name', '111')// 或this.$set(this.form, 'name', name)// 例子2:修改数组let arr =[{name: "name1", sex: "男"},{name: "name2", sex: "男"}]this.$set(arr, 1, {name: "name2", sex: "女"})

第三种: vue.$forceUpdate()

// 赋值之后强制更新视图如aa () {this.form = {a: 'a',b: 'b'}// 但是dom没有发生变化 数据赋值之后加上this.$forceUpdate()}

对此有什么疑问 或者 其它前端面临的问题都可以来欢迎评论 在下知道的定会帮你回答希望能够帮到你 (#^.^#)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。