我可以使用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方法中提取出邏輯，然后將其插入其中。

希望這能回答你的問題！