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

Question

我才刚刚开始 Vue.js；对它的功能印象深刻，但无法从文档中解析出基础知识。

假设一些复选框或 select[多个]:

<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>

我相信一定有办法用 v-bind 来实现这种 inArray 的逻辑。如果不是，我可以引用一个方法而不是一个值吗？喜欢 v-bind:class="{ 'orange': hasOranges() }"?

Answer 1

创建一个方法来检查 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>

Answer 2

仅以 Linus 的回答为基础，还有其他几种方法可以处理此问题。

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

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

如果在您的示例之一中，class 名称与绑定到您的复选框的水果值相匹配，您可以直接绑定到 fruits 数组：

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

或者，如果您的 class 名称与水果名称不同，您可以绑定到计算的属性:

<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.js v 绑定到数组中的值

Vue.js v-bind to a value within an array

javascript

arrays

multi-select

vue.js