更改类取决于字符串值

Question

我需要根据变量值更改div类。值可以有多个值的问题，应该为我评估为真。

isActive: "yes"

可以是："真"、"同意"。如何添加类切换并接受所有这三个变体："是"、"真"、"同意"？

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';
}
}
})