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的可见性

回答

相关问题