vue中如何动态的增减组件的类名(class)

在 Vue.js 2 中,你可以通过计算属性或直接在模板中使用 v-bind:class 来动态地改变组件的类名。下面是一个简单的示例,说明如何在某个条件被复核后为组件添加一个 selected 类(此处为组件添加一个默认的类(例如 radio)以及根据某个条件来添加 selected 类,你可以在绑定类的时候使用数组语法,以便同时添加多个类)

示例代码






解释

  1. 默认类:在 :class 中使用数组语法 ['radio', { 'selected': isSelected }]。这里 'radio' 是默认类,而 { 'selected': isSelected } 是条件类,表明只有在 isSelected 为 true 时才会添加 selected 类。
  2. 样式:定义了 .radio 类的样式和 .selected 类的样式。

通过这种方式,当你点击按钮切换 isSelected 的值时,组件会始终带有 radio 类,并根据条件动态添加或移除 selected 类。

你可能感兴趣的:(vue2.x,vue3.x,vue.js,前端,javascript)