Vuejs在複選框選擇上切換div的可見性

我想切換使用Vuejs的容器div的可見性我已經嘗試過兩種方法，但不會對容器的可見性產生任何影響。方法1：Vuejs在複選框選擇上切換div的可見性

<body> 
    <div class="checkbox" id = "selector"> 
     <label><input type="checkbox" v-model="checked">Options</label> 
    </div> 
    <div class="container" id="app-container" v-if="checked"> 
     <p>Text is visible</p> 
    </div> 
<script src="path_to_/vue.js"></script> 
<script> 
    var app = new Vue({ 
     el: '#selector', 
     data: { 
      "checked": false 
     } 
    }) 
</script> 
</body>

我知道Vue.js加載確定，勾選該複選框對文本可見性沒有影響。

方法2：

<body> 
    <div class="checkbox" id = "selector"> 
     <label><input type="checkbox" v-on:click="seen = !seen">Options</label> 
    </div> 
    <div class="container" id="app-container" v-if="seen"> 
     <p>Text is visible</p> 
    </div> 
<script src="path_to_/vue.js"></script> 
<script> 
    var app = new Vue({ 
     el: '#selector', 
     data: { 
      "seen": false 
     } 
    }) 
</script> 
</body>

再次，選中複選框沒有任何效果。有任何想法嗎？

來源

2017-02-18 Don Smythe

您必須在div元素中包含checkbox元素，並使用selector id屬性。

您正在創建的元素vue僅適用於包含checkbox的div。

var app = new Vue({ 
 
     el: '#selector', 
 
     data: { 
 
      checked: false 
 
     } 
 
});

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<body> 
 
    <div id="selector"> 
 
    <div class="checkbox"> 
 
     <label><input type="checkbox" v-model="checked">Options</label> 
 
    </div> 
 
    <div class="container" id="app-container" v-if="checked"> 
 
     <p>Text is visible</p> 
 
    </div>  
 
    </div> 
 
</body>

來源

2017-02-18 10:51:04

Vuejs在複選框選擇上切換div的可見性

回答

相關問題