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

u4dcyp6a 于 2022-12-23 发布在 Vue.js

关注(0)|答案(3)|浏览(155)

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，但我仍然无法隐藏的内容。
最初复选框和文本内容应该是可见的。所以一旦用户点击复选框，内容将隐藏。

vue.js

来源：https://stackoverflow.com/questions/70194695/how-to-hide-the-content-on-checkbox-click-in-vuejs

3条答案

按热度按时间

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>

赞(0）回复(0）举报 2022-12-23

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>

赞(0）回复(0）举报 2022-12-23

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"

赞(0）回复(0）举报 2022-12-23

我来回答

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

3条答案

相关问题

热门标签

最新问答