如何在Vuejs中隐藏复选框点击的内容？答案

【问题标题】：How to hide the content on checkbox click in Vuejs?如何在Vuejs中隐藏复选框点击的内容？
【发布时间】：2022-12-20 01:46:14
【问题描述】：

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 之类的方法进行了切换，但我仍然无法隐藏内容。

最初复选框和文本内容应该是可见的。因此，一旦用户单击复选框，内容就会隐藏起来。

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

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
我想我现在明白了，伙计，请检查我的答案:)

【解决方案2】：

不需要几个变量来处理这个逻辑。
你可以只保存'checked'变量，它是双向绑定的，选中复选框时，它将为真。
这是我的代码。

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>

【讨论】：

您可以将 IsChecked 的初始值设置为 true。

【解决方案3】：

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"

【讨论】：