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

这是我的小提琴：

如何根据在数组（模块[]）中找到的值使用v-if隐藏/显示

任何帮助都将不胜感激。

---

谢谢。

您至少有两个选项可以管理它，我将在这里介绍。第一个是在

v-if

内部进行简单检查，查看项目是否包含在

模块中。例如：

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

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

这里有几点需要注意：

v-for
直接查看
modules
数组以确定要渲染的div数
数组中的值既用作div的文本（
{{module}
），也用作类之一（
：class=“module”
）
始终使用标准的
class
属性应用class
框
。这与
：class
绑定的组合最终以
abc框
作为类列表
下面是一个工作示例，演示了
v-for
方法


newvue({
el:“#应用程序”，
数据：{
模块：['abc'，'def']
}
});
.box{
高度：75px；
宽度：75px；
背景：#444；
填充：10px；
保证金：5px；
颜色：#fff；
}

{{module}}
我是否也可以将@click=“goTo（module）”附加到这些div？“module”参数是否会保存模块[]中数组元素的值？我需要这个@click，因为我将基于divsye的单击定义路由，
模块将引用数组中的正确项，所以这可以正常工作。
<div class="box" v-for="module in modules" :class="module">{{ module }}</div>