Vuejs在复选框选择上切换div可见性 [英] Vuejs toggle div visibility on checkbox selection
本文介绍了Vuejs在复选框选择上切换div可见性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用Vuejs切换容器div的可见性我已尝试过两种方法，但不会对容器的可见性产生任何影响。方法1：
I am trying to toggle the visibility of a container div using Vuejs I have tried two methods as per below but neither have any affect on visibility of the container. Method 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加载好了，勾选复选框对文本可见性没有影响。
I know Vue.js loads OK, ticking the checkbox has no effect on text visibility.
方法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>
再次勾选复选框无效。有什么想法？
Again, ticking the checkbox has no effect. Any ideas?
推荐答案
你必须在<$中包装复选框元素c $ c> div 元素与选择器 id属性。
You have to wrap checkbox element within div element with selector id attribute.
vue 您创建它的元素仅适用于包含复选框的div 。
The vue element which you're creating it is only available for the div which contains the checkbox.
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>
这篇关于Vuejs在复选框选择上切换div可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
