上海网站建设 缔客免费人脉推广
在 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 类。