javascript - 我可以使用 vue.js v-if 来检查数组中是否存在该值吗

Question

我在表单中有复选框，我想直接使用 v-if 来根据选定的复选框值显示/隐藏部分。

有可能还是我应该使用 watch: ？

Answer 1

这是可能的。我建议将数据模型添加到切换 true 或 false 的复选框。然后这将允许您使用 v-if 切换内容的外观。

例子:

<template>
    <input type="checkbox" v-model="showContent" value="triggerString" />
    <p v-if="showContent === 'triggerString'">Lorem ipsum</p>
</template>

<script>
    export default {
        data() {
            return {
                showContent: false
            }
        }
    }
</script>

一般来说，我们在不必要的时候尽量不使用watch。

更新:使用您包含的 JSFiddle，这就是您仅使用 v-if

的方式

<template>
    <input type="checkbox" 
           v-model="section"
           name="section"
           value="Epiphone"
           id="epiphone">
    <label for="epiphone">Epiphone</labe>

    <section v-if="section.includes('Epiphone')">
        <h1>Epiphone</h1>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                section: []
            }
        }
    }
</script>

由于在您创建的部分数组上发生了两种方式的绑定(bind)，因此不需要额外的 div 对象，因为唯一会发生的跟踪将发生在部分对象中。

关于 v-if 要记住的关键是它可以在其中包含实际的 JS 表达式，而不仅仅是数据值。所以你可以从你的 watch 方法中提取逻辑并简单地将它插入那里。

希望这能回答您的问题!