Vue.js中如何实现点击checkbox复选框隐藏对应内容

问题原因 #

• 你冗余定义了checked、unchecked两个状态变量，逻辑冲突，且unchecked没有和checkbox的选中状态做绑定更新，自然无法触发内容显隐切换
• 已经给input绑定了v-model="checked"，它会自动同步checkbox的选中状态到变量，不需要额外绑定@click事件处理切换逻辑
• 原有Vue实例代码缺少方法块的闭合花括号，存在语法错误

修正方案 #

只需要保留一个状态变量控制显隐即可，初始设为false对应初始未选中、内容可见的需求，选中后变量变为true，通过v-if="!checked"控制内容隐藏：

修正后JS代码

new Vue({
  el: '#selector',
  data: {
    checked: false
  }
});

修正后HTML代码

<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>

如果需要保留点击复选框之外的切换触发逻辑，再加对应的方法即可，当前场景不需要额外的事件监听。

内容的提问来源于stack exchange，提问作者user17525310