我可以在 computed 属性中使用 props 来绑定 css class 吗？

Question

是否可以通过其他方式在计算属性中使用道具？

当我这样做时，它会添加 class 'foo'（道具的名称），而不是想要的 'fa-foo'（或其他值，如果道具已设置）。

两者都有效，如果我只绑定其中之一，直接在标记中。

props: {
  foo: {
    type: String,
    default: 'fa-foo'
  }
},

computed: {
  classObject: function () {
    return {
      foo: true,
      'text-danger': true
    }
  }
}

Answer 1

你必须使用 this.foo 来访问道具，因为范围不同

Answer 2

class 绑定的对象语法在值为 truthy 时应用 key 作为 class 名称。由于计算的 prop return 值包括 { foo: true }，因此应用 "foo" class。

要将 foo 属性的值设置为 class 名称，可以使用 this.foo 作为带括号的键：

computed: {
  classObject: function () {
    return {
      [this.foo]: true,
      'text-danger': true
    }
  }
}

Class 绑定也允许字符串和对象数组，所以计算的 prop 也可以写成：

computed: {
  classObject: function () {
    return [
      this.foo,
      {
        'text-danger': true
      }
    ]
  }
}

...或者只是一个字符串数组：

computed: {
  classObject: function () {
    return [
      this.foo,
      'text-danger',
    ]
  }
}

demo

我可以在 computed 属性中使用 props 来绑定 css class 吗？

Can I use props in computed property to bind a css class?

css

vue.js

vuejs2

vue-props

我可以在 computed 属性 中使用 props 来绑定 css class 吗？

Can I use props in computed property to bind a css class?

css

vue.js

vuejs2

vue-props

我可以在 computed 属性中使用 props 来绑定 css class 吗？