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

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

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