在 Vue.js 2 中，你可以通過計算屬性或直接在模板中使用?v-bind:class?來動態地改變組件的類名。下面是一個簡單的示例，說明如何在某個條件被復核后為組件添加一個?selected?類（此處為組件添加一個默認的類（例如?radio）以及根據某個條件來添加?selected?類，你可以在綁定類的時候使用數組語法，以便同時添加多個類）
示例代碼
<template><div><button @click="toggleCondition">切換條件</button><div :class="['radio', { 'selected': isSelected }]">我是一個可選擇的組件</div></div>
</template><script>
export default {data() {return {isSelected: false, // 初始條件};},methods: {toggleCondition() {this.isSelected = !this.isSelected; // 切換條件},},
};
</script><style>
.radio {padding: 10px;border: 1px solid #ccc; /* 默認樣式 */
}.selected {background-color: yellow; /* 選中時的樣式 */
}
</style>
解釋
- 默認類：在?
:class?中使用數組語法?['radio', { 'selected': isSelected }]。這里?'radio'?是默認類，而?{ 'selected': isSelected }?是條件類，表明只有在?isSelected?為?true?時才會添加?selected?類。 - 樣式：定義了?
.radio?類的樣式和?.selected?類的樣式。
通過這種方式，當你點擊按鈕切換?isSelected?的值時，組件會始終帶有?radio?類，并根據條件動態添加或移除?selected?類。
)
)
