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

Question

我在表单中有复选框,我想使用v-if直接显示/隐藏符合所选复选框值的部分.

有可能或我应该使用手表:？

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>

由于在您创建的节数组上发生了双向绑定,因此不需要其他div对象,因为将要发生的唯一跟踪将在节对象中.

要记住的关键v-if是它可以在其中使用实际的JS表达式,而不仅仅是数据值.因此,您可以从watch方法中提取出逻辑,然后将其插入其中.

希望这能回答你的问题!