我可以使用vue.js v-如果檢查是否存在數組中的值

Question

我在表單中有複選框，我想直接使用v-if根據選定的複選框值顯示/隱藏部分。

是否有可能或我應該使用手錶：？

Answer 1

這是可能的。我會建議添加一個數據模型到切換真或假的複選框。然後，您可以使用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表達式，而不僅僅是數據值。所以你可以從你的手錶方法中提取出邏輯並簡單地插入其中。

希望這回答你的問題！