数据更改时,Vue不会重新呈现绑定的类
我用默认值声明了数据“ isLoading”,并绑定到html标签中,并且声明了更改数据的方法。
请参见下面的代码!
样式
.is-red{
background: red;
}
.is-blue{
background: blue;
}
脚本
export default {
created() {
this.isLoading = true;
},
mounted() {
},
data() {
return {
isloading: true
};
},
methods: {
changeColor() {
this.isLoading = !this.isLoading;
console.log(this.isLoading);
}
}
}
html
<h1 v-bind:class="{'is-blue': isLoading, 'is-red': !isLoading }">hello</h1>
<button @click="changeColor">toggle</button>
我可以在控制台日志中看到数据在“ true”和“ false”之间切换。但是,DOM没有任何变化。
出什么问题了?
答案 0 :(得分:1)
您用名称isloading
声明了变量。
并在created中声明isLoading。Vue将不会观察动态变量的变化。
要更新组件内部的动态变量,请使用Vue.set()
或this.$set()
。
您的脚本:
export default {
mounted() {
},
data() {
return {
isLoading: true
};
},
methods: {
changeColor() {
this.isLoading = !this.isLoading;
}
}
}
答案 1 :(得分:0)
尝试如下使用computed
脚本
export default {
data() {
return {
isloading: true
};
},
computed:{
classes(){
return this.isloading ? 'is-blue' : 'is-red';
}
},
methods: {
changeColor() {
this.isLoading = !this.isLoading;
console.log(this.isLoading);
}
}
}
html
<h1 :class="classes">hello</h1>
<button @click="changeColor">toggle</button>