时间戳

首页 > 解决方案 > Vue.js 条件：如果包含

vue.js - Vue.js 条件：如果包含

问题描述

我需要在 Vue 中创建条件来检查数组是否包含值。

items: { [1,5,8,12,63]}
                <div v-for="item in items">
                        <div v-if="item == 1">
                               Yes
                        </div>
                        <div v-else>
                            No
                        </div>
                </div>

输出是： Yes, No, No, No, No 。

我只需要一次是和否。我需要：

是的，没有。

标签： vue.jsvuejs2

解决方案

v-for只会循环遍历数组和v-if/将有条件地为数组中的每个项目v-else呈现适当的代码块。你应该做的是使用一种方法来检查一个数字是否在你的列表中。您可以使用..itemsindexOf

var app = new Vue({
  el: '#app',
  data: {
    items: [1, 5, 8, 12, 63]
  },
  methods: {
    itemsContains(n) {
      return this.items.indexOf(n) > -1
    }
  }
});
<div id="app">
  <div v-if="itemsContains(1)">
    Yes
  </div>
  <div v-else>
    No
  </div>
</div>

看到这个 JSFiddle

如果需要，您也可以摆脱该方法并进行条件内联。

<div id="app">
  <div v-if="items.indexOf(1) > -1">
    Yes
  </div>
  <div v-else>
    No
  </div>
</div>

推荐阅读