如何隐藏在Vuejs中的复选框点击的内容?

u4dcyp6a  于 2022-12-23  发布在  Vue.js
关注(0)|答案(3)|浏览(154)
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>

我已经切换使用方法,如检查=! checkedd,但我仍然无法隐藏的内容。
最初复选框和文本内容应该是可见的。所以一旦用户点击复选框,内容将隐藏。

jckbn6z7

jckbn6z71#

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

0yycz8jy2#

处理此逻辑不需要几个变量。
您可以只保存"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>
s5a0g9ez

s5a0g9ez3#

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"

相关问题