如何通过单击Vue中的另一个div（按钮）来显示隐藏的div？答案

【问题标题】：How to show a hidden div by clicking on another div (button) in Vue?如何通过单击Vue中的另一个div（按钮）来显示隐藏的div？
【发布时间】：2021-06-08 10:30:11
【问题描述】：

我正在尝试显示通常在单击确认按钮后隐藏的加载 div，即使在单击时更改了隐藏值也是如此。

这是我的代码：

<div class="form-btns">
  <button type="button" class="btns full-width" v-on:click="submitPhoneNumber(); isHidden = false">
   {{t('confirmNumber')}}
  </button>

  <loader title="" v-if="!isHidden"></loader>

  <button type="button" class="btns hyperlink">
   {{t('accountRecovery')}}
  </button>

</div>

data() {
    return {
      isHidden: true,
    };

【问题讨论】：

您是否收到任何控制台错误？你能通过css验证加载器没有隐藏吗
加载程序是隐藏的，因为我用 ( v-if="isHidden" ) 隐藏它，如果更改它会显示，并且我没有收到控制台错误，我正在尝试更改“！isHidden”点击时“隐藏”。

标签： vue.js vuejs3

【解决方案1】：

您的代码有点古怪。摆脱您尝试直接在模板 HTML 中设置值的方式，并将其设置在 methods 的函数中。所以你的新代码是：

<div class="form-btns">
  <button type="button" class="btns full-width" v-on:click="submitPhoneNumber()">
  v {{t('confirmNumber')}}
  </button>

  <loader title="" v-if="!isHidden"></loader>

  <button type="button" class="btns hyperlink">
   {{t('accountRecovery')}}
  </button>

</div>

然后在你的methods 中像这样切换值：

data() {
  return {
    isHidden: true,
  }
},
methods: {
  submitPhoneNumber() {
    this.isHidden = false; // I would probably rename this to isLoading and invert the logic
    // Other stuff...
  }
}

【讨论】：

【解决方案2】：

您应该更改submitPhoneNumber 中的isHidden 值，如下所示，或者使用您在第一个函数中调用的专用函数。

let app = new Vue({
  el: '#app',
  data: {
    isHidden: true
  },
  methods: {
    submitPhoneNumber() {
      this.isHidden = false;
      
      // Simulate an API response after 3s to hide the loader
      setTimeout(() => { this.isHidden = true; }, 3000);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
  <button type="button" @click="submitPhoneNumber()">
   Submit button
  </button>

  <p v-if="!isHidden">Loading...</p>

</div>

【讨论】：