在vue中,data里面的数据改变了,试图却没有更新,常见的状况是javascript
此时咱们该怎么办呢?有三种办法
一、 经过
set(this.arr,‘2’,’‘testStr’’) 即this.$set(obj,key,val)html
二、经过forceUpdate 如:在修改完数据后,直接 this.$forceUpdate()vue
三、修改另外一个data里面的值主动更新触发渲染java
<template> <div class="demo" ref="refDemo"> 方法一:{{arr[2]}} <button @click="Add">+</button> 方法二:obj:{{obj.test[0].testStr}} 方法三: <div >{{test}}</div> <div v-if="test"></div> </div> </template> <script> export default { name: 'HelloWorld', data(){ return{ arr:[1,2,3,4,5,6], obj:{ test:[{testStr:3}] }, test:false } }, mounted() { }, methods:{ Add(){ // 第一种方法 this.$forceUpdate() // this.arr[2]+=this.arr[2] // console.log('this.arr[2]:'+this.arr[2]) // this.$forceUpdate() //============================================= //第二种方法 $set() // this.$set(this.obj.test[0],'testStr',this.obj.test[0].testStr+3) //============================================= // 方法三修改另外一个data里面的值主动更新触发渲染 //this.arr[2]+=this.arr[2] // this.test =!this.test //============================================= //方法三优化版 this.arr[2]+=this.arr[2] this.test=true this.$nextTick(() => { this.test = false }) } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
若有不解,请加群897149839web