vue数据更新但视图(DOM)不刷新解决办法
第一种:强制更新dom
(图片来源网络,侵删)
{{num}} 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() }
对此有什么疑问 或者 其它前端面临的问题都可以来欢迎评论 在下知道的定会帮你回答希望能够帮到你 (#^.^#)
(图片来源网络,侵删)
(图片来源网络,侵删)
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...