Question

在视图中我需要生成以下类：

<div class="comp comp--lock comp--red">Foo</div>

lock和red基于州，其中可能有以下颜色值：

comp--red，comp--yellow，comp--blue以及许多其他可能的颜色

到目前为止，我正在使用计算方法根据数据连接类名：

getCompClassName(){
  return `comp ${this.isLock ? 'comp--lock' : ''} comp--${this.color}`
}

查看Vuejs文档我发现v-bind:class应该以更好的方式解决这个问题，我遇到的问题是如何解决color插值，因为我需要声明所有可能的颜色。

data: {
  classObject: {
    'comp--lock': this.isLock,
    'comp--red': this.color === 'red',
    'comp--blue': this.color === 'blue',
    'comp--yellow': this.color === 'yellow'
  }
}

有没有办法使用v-bind:class来解决这个问题，它可以更好地扩展，而不必列出所有可能性，或者我应该使用计算方法来插入类名吗？

Answer 1

你能不能只使用计算？

computed: {
  classObject() {
    return {
      'comp--lock': this.isLock,
      [`comp--${this.color}`]: true
    }
  }
}

JSfiddle：https://jsfiddle.net/5sknyauz/5/

编辑：你实际上可以在数据中做同样的事情：

data() {
  return {
    classObject: {
      'comp--lock': this.isLock,
      [`comp--${this.color}`]: true
    }
  }
}

Vuejs类绑定和类插值

1 个答案: