gpt4 book ai didi

javascript - Vuejs 在复选框选择时切换 div 可见性

转载 作者:数据小太阳 更新时间:2023-10-29 05:11:42 25 4
gpt4 key购买 nike

我正在尝试使用 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 加载正常,勾选复选框对文本可见性没有影响。

方法二:

<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 属性将 checkbox 元素包装在 div 元素中。

您正在创建的 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>

关于javascript - Vuejs 在复选框选择时切换 div 可见性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42314118/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com