如何在 Vuejs v-if 中检查数组元素是否相等？

Question

我在一个 vuejs 项目中工作，我遇到了一个问题来检查一个数字是否等于一个数组元素。我的代码是这样的：<div v-if="someValue != arrayElement">    //    </div>我的问题是我如何遍历数组以检查 var 'someValue' 是否有相等的值。

Answer 1

Array.includes(value)如果要测试精确值，可以使用

new Vue({

    data: function() {

        return {

            value: 3,

            array: [3,4,5,6,7,3]

        }

    },

    computed: {

        isInArray: function() {

            return this.array.includes(value);

        }

    }

})

或者直接在这样的v-if指令中

<span v-if="array.includes(value)"> {{ value }} </span>

Answer 2

更好的方法是创建计算属性，按特定值过滤数组。例如：

new Vue({

  data: function() {

    someValue: 3,

    array: [3,4,5,6,7,3]

  },

  computed: {

    arrayFiltered() {

      return this.array.filter(elem => elem === this.someValue);

    }

})

在您的 html 中，这可能如下所示：

<div v-if="array.includes(someValue)">

   <div v-for="elem in arrayFiltered" :key="array.indexOf(elem)">

     {{ elem }}

   </div>

 </div>

因此，您可以将数组指定为对象数组，例如