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;
© 版权声明
评论 抢沙发

请登录后发表评论