这是我的 fiddle :DEMO
new Vue({
el: '#app',
data: {
modules: ['abc', 'def']
}
})
如何根据数组 (modules[]) 中找到的值使用 v-if 隐藏/显示?
如有任何帮助,我们将不胜感激。 谢谢。
最佳答案
您至少有几个选项来管理此问题,我将在此处进行描述。第一个是在 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>
这里有几点需要注意:
v-for
直接查看modules
数组以确定要渲染的 div 数量。- 数组中的值既用作 div 的文本 (
{{ module }}
),也用作类之一 (:class="module"
). - 始终使用标准
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>
关于javascript - 使用 v-if 隐藏和显示元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47378580/