更改类取决于字符串值

Question

我需要根据变量值更改div类。值可以具有多个值，这个值对我来说应该是正确的。

isActive: "yes"

可以是：“ true”，“ agree”。如何添加类的开关并接受所有三个变体：“是”，“真”，“同意”？

https://jsfiddle.net/ogx1pt3y/

Answer 1

您可以具有一个计算属性，在该属性中，您可以根据许多条件返回正确的类：

<p :class="paragraphClasses">{{ message }}</p>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    isActive: 'yes',
    shouldBeRed: true
  },
  computed: {
    paragraphClasses() {
      return this.isActive == 'yes' && this.shouldBeRed ? 'big' : 'small';
    }
  }
})