如何在Vuejs中单击复选框时隐藏内容？

Question

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=!checked来进行切换，但仍无法隐藏内容。

初始时，复选框和文本内容应该可见。当用户单击复选框时，内容将被隐藏。

- user17525310

Answer 1

处理这个逻辑不需要多个变量。
您只需要保存“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>

- 阿亮同学

---

您可以将IsChecked的初始值设置为true。 - 阿亮同学

Answer 2

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>

- Nikola Pavicevic

---

嘿，伙计，现在检查一下，将“checked”的初始值设置为true。 - Nikola Pavicevic

我现在明白了，伙计，请检查我的答案 :) - Nikola Pavicevic

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

- user17525310