new Vue({
el: '#selector',
data: {
checked: false,
unchecked: true
},
methods: {
hidecont() {
this.checked = !this.unchecked;
}
});<div id="selector">
<div class="checkbox">
<label><input type="checkbox" v-model="checked" @click="hidecont" >Options</label>
</div>
<div class="container" id="app-container" v-if="unchecked">
<p>Text is visible</p>
</div>
</div>我已经使用check=这样的方法进行了切换！checkedd，但我仍然无法隐藏内容。
最初，复选框和文本内容应该是可见的。因此，一旦用户点击复选框，内容就会隐藏起来。
data属性必须是函数：
new Vue({
el: '#selector',
data() {
return {
checked: false,
}
},
methods: {
hidecont() {
this.checked = !this.checked;
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="selector">
<div class="checkbox">
<label><input type="checkbox" v-model="checked" @click="hidecont" >Options</label>
</div>
<div class="container" id="app-container" v-if="!checked">
<p>Text is visible</p>
</div>
</div>处理此逻辑不需要几个变量
您只需保存"checked"变量，它是双向绑定的，当复选框被选中时，它将为true
这是我的代码。
new Vue({
el: '#selector',
data: {
checked: false,
},
})
<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>
new Vue({
el: '#selector',
data() {
return {
checked: false,
}
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="selector">
<div class="checkbox">
<label><input type="checkbox" v-model="checked" @click="hidecont" >Options</label>
</div>
<div class="container" id="app-container" v-if="!checked">
<p>Text is visible</p>
</div>
</div>
我刚刚在内容div 中替换了v-if="!checked"