Question

这是我的小提琴：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>
...

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

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

这里有几点需要注意：

v-for直接查看modules数组，以确定要渲染的div数。
数组中的值既用作div的文本（{{ module }}），也用作其中一个类（:class="module"）。
始终使用标准box属性应用课程class。这个和:class绑定的组合最终与例如abc box结合。 v-for作为班级列表。

这是一个展示new Vue({ el: '#app', data: { modules: ['abc', 'def'] } });方法的工作示例。

＆＃13;

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

＆＃13;

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

＆＃13;

name

＆＃13;

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

1 个答案: