データが変更されても、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では何も変更されません。
何が問題ですか？
変数を名前で宣言しましたisloading。そして、created.VueでisLoadingを宣言すると、動的変数の変更は監視されません。
コンポーネント内の動的変数を更新するには、Vue.set()またはを使用しますthis.$set()。
あなたのスクリプト：
export default {
mounted() {
},
data() {
return {
isLoading: true
};
},
methods: {
changeColor() {
this.isLoading = !this.isLoading;
}
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加