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

创建一个方法，用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>

如果在一个示例中，类名与绑定到复选框的果实值匹配，则可以直接绑定到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
          };
        }
    }
})

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

2 个答案: