Vue.js v绑定到数组中的值

Question

我刚刚开始使用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> 

绑定到一个Vue的模型的数组：

var vm = new Vue({ 
    el: '#foo', 
    data: { 
     fruits: ['orange'], 
    }, 
}); 

我想基于操纵的一些其它元素的类什么是或不在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> 

我敢肯定，必须有办法做到这一点inArray一种逻辑与v-bind。如果没有，我可以参考一个方法而不是一个值？像v-bind:class="{ 'orange': hasOranges() }"？

Answer 1

只是建立在Linus的回答，还有你可以处理这几个其他的方式。

您可以将检查你的绑定表达式：

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

如果，在你的例子之一，类名称匹配绑定到您的复选框水果值，可以直接绑定到fruits阵列：

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

Answer 2

创建一个方法，检查fruits数组与#indexOf()它包含水果。

var vm = new Vue({ 
 
    el: '#foo', 
 
    data: { 
 
     fruits: ['orange'], 
 
    }, 
 
    methods: { 
 
    hasFruit(fruit) { 
 
     return this.fruits.indexOf(fruit) === -1 ? false : true 
 
    } 
 
    } 
 
});

<div id="myfruits" v-bind:class="{ 'apple': hasFruit('apple'), 'banana': hasFruit('banana'), 'orange': hasFruit('orange') }"> 
 
    fruits 
 
</div>