![](/img/trans.png)
[英]Enable Dropdown Selection Using a Checkbox, Toggle Dependent Dropdown and DIV Visibility
[英]Vuejs toggle div visibility on checkbox selection
我试图使用Vuejs切换容器div的可见性我已经尝试了两种方法,但是对容器的可见性都没有任何影响。 方法1:
<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>
再次勾选复选框无效。 有任何想法吗?
您必须使用selector
id属性在div
元素中包装checkbox
元素。
您正在创建它的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.