javascript - 使用 v-if 隐藏和显示元素

Question

这是我的 fiddle :DEMO

new Vue({
  el: '#app',
  data: {
    modules: ['abc', 'def']
  }
})

如何根据数组 (modules[]) 中找到的值使用 v-if 隐藏/显示？

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

您至少有几个选项来管理此问题，我将在此处进行描述。第一个是在 v-if 内部进行简单检查，以查看该项目是否包含在 modules 中。例如:

<div class="abc box" v-if="modules.indexOf('abc') >= 0">abc</div>
<div class="def box" v-if="modules.indexOf('def') >= 0">def</div>
...

这有点粗糙，从维护或性能的 Angular 来看并不是很好。另一种选择是使用 modules 数组作为 div 集合的源，使用 v-for 。例如:

<div class="box" v-for="module in modules" :class="module">{{ module }}</div>

这里有几点需要注意:

1. v-for 直接查看 modules 数组以确定要渲染的 div 数量。
2. 数组中的值既用作 div 的文本 ({{ module }})，也用作类之一 (:class="module").
3. 始终使用标准 class 属性来应用类 box。将此与 :class 绑定(bind)的组合最终得到例如: abc box 作为类列表。

这是一个演示 v-for 方法的工作示例。

new Vue({
  el: '#app',
  data: {
    modules: ['abc', 'def']
  }
});

.box {
  height: 75px;
  width: 75px;
  background: #444;
  padding: 10px;
  margin: 5px;
  color: #fff;
}

<script src="https://unpkg.com/vue@2.5.6/dist/vue.js"></script>

<div id="app">
  <div class="box" v-for="module in modules" :class="module">{{ module }}</div>
</div>