Vue 中的条件样式介绍

Question

Vue 的 v-bind 语法 支持通过 对象语法 。

const app = new Vue({
  data: () => ({ isGreen: true }),
  // `div` will have class 'green' if `isGreen` is true
  template: `
    <div v-bind:class="{ green: isGreen }"></div>
  `
});

// Remove the class 'green' from the `div`
app.$data.isGreen = false;

您可以有条件地绑定多个类，并使用 : 的简写 v-bind:

const app = new Vue({
  data: () => ({ green: true, small: false }),
  // `div` will have class 'green' if `green` is true
  // and 'small' if `small` is true.
  template: `
    <div :class="{ green, small }"></div>
  `
});

// Remove the class 'green' from the `div` and add class 'small'
app.$data.green = false;
app.$data.small = true;

字符串语法

您绑定到类的值 v-bind 可以是字符串，而不仅仅是对象。 例如您可以将类名存储在 data 数据中：

const app = new Vue({
  data: () => ({ myClass: 'green' }),
  // `div` will have whatever class or classes are in the
  // `myClass` data value.
  template: `
    <div :class="myClass"></div>
  `
});

// Remove the class 'green' from the `div` and replace it
// with the class 'small'
app.$data.myClass = 'small';

另一种巧妙的方法是 使用三元运算符 来决定元素将具有哪个类：

const app = new Vue({
  data: () => ({ isGreen: true }),
  // `div` will have class 'green' if `isGreen` is true.
  template: `
    <div :class="isGreen ? 'green' : 'small'"></div>
  `
});

// Remove the class 'green' from the `div` and replace it
// with the class 'small'
app.$data.isGreen = false;

数组语法

你也可以绑定 class 到一个数组。 然后 Vue 将组合数组中的所有元素以形成最终的类绑定。 这使您可以在一个声明中混合和匹配字符串和对象语法：

const app = new Vue({
  data: () => ({ green: true }),
  // `div` will have class 'green' if `green` is true, and
  // 'small' otherwise.
  template: `
    <div :class="[{ green }, green ? '' : 'small']"></div>
  `
});

// Remove the class 'green' from the `div` and replace it
// with the class 'small'
app.$data.green = false;