Javascript Vue.js v-bind到数组中的值

我刚刚开始使用Vue.js；对它的功能印象深刻，但在解析文档之外的基础知识时遇到困难

假设某些复选框或选择[多个]：

<label><input v-model="fruits" type="checkbox" value="apple"> apple</label><br>
<label><input v-model="fruits" type="checkbox" value="orange"> orange</label><br>
<label><input v-model="fruits" type="checkbox" value="banana"> banana</label><br>

我想根据

vm.$data.fruits

数组中的内容来操作其他元素上的类。我想不出使用

v-bind:class

检查

fruits

数组中的语法。我猜是这样的：

<div id="myfruits" v-bind:class="{ 'apple': fruits.apple, 'banana': fruits.banana, 'orange': fruits.orange }">fruits</div>
<div id="apple" v-bind:class="{ 'banana': fruits.banana }">You've got bananas!</div>

水果
你有香蕉！

---

我相信一定有办法做到这一点，

inaray

一种使用

v-bind

的逻辑。如果不是，我可以引用方法而不是值吗？像

v-bind:class=“{'orange'：hasaoranges（）}”

？

创建一个方法，用

#indexOf（）

检查

水果数组是否包含水果


var vm=new Vue({
el:“#foo”，
数据：{
水果：[“橙色”]，
},
方法：{
哈斯果（水果）{
返回此.fruits.indexOf（fruit）=-1？false:true
}
}
});

果实
仅根据Linus的答案，您还可以采用其他几种方法来处理此问题

您可以在绑定表达式中进行检查：

<div id="apple" v-bind:class="{ 'banana': fruits.indexOf('banana') > -1 }">You've got bananas!</div>

或者，如果您的类名与水果不同，则可以绑定到计算属性：

<div id="myfruits" v-bind:class="classes">fruits</div>

new Vue({
    el: '#app',
    data: {
        fruits: ['orange'],
    },
    computed: {
        classes: function() {
          return  {
            'has-banana': this.fruits.indexOf('banana') > -1,
            'has-apple': this.fruits.indexOf('apple') > -1,
            'has-orange': this.fruits.indexOf('orange') > -1
          };
        }
    }
})

水果
新Vue({
el:“#应用程序”，
数据：{
水果：[“橙色”]，
},
计算：{
类：函数（）{
返回{
“has banana”：this.fruits.indexOf（'banana'）>-1，
“has apple”：this.fruits.indexOf（'apple'）>-1，
“has orange”：this.fruits.indexOf（'orange'）>-1
};
}
}
})
谢谢！这是否意味着没有这个方法就没有速记方法了？一般来说没有，但是在特殊情况下，数组的项也将是类名，请参见Peter的回复中的速记版本。不知道第二个速记，很好！
<div id="myfruits" v-bind:class="fruits">fruits</div>

<div id="myfruits" v-bind:class="classes">fruits</div>

new Vue({
    el: '#app',
    data: {
        fruits: ['orange'],
    },
    computed: {
        classes: function() {
          return  {
            'has-banana': this.fruits.indexOf('banana') > -1,
            'has-apple': this.fruits.indexOf('apple') > -1,
            'has-orange': this.fruits.indexOf('orange') > -1
          };
        }
    }
})