在 Vue.js 中隐藏 div onclick

Question

以下 jQuery 的 Vue.js 等价物是什么？

 $('.btn').click(function(){  $('.hideMe').hide()  });

原文由 user9046370 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

jQuery 开箱即用，而 Vue.js 不行。要初始化 Vue.js 组件或应用程序，您必须将该组件及其数据绑定到模板中的一个特定 HTML 标记。

在此示例中，指定的元素是 <div id="app"></div> 并通过 el: #app 定位。你会从 jQuery 中知道这一点。

在声明了一些保持切换状态的变量后，在本例中为 isHidden ，初始状态为 false 并且必须在 data 对象中声明。

其余的是特定于 Vue 的代码，例如 v-on:click="" 和 v-if="" 。为了更好地理解，请阅读 Vue.js 的文档：

• Vue 实例
• 模板语法
• 事件处理
• 条件句

注意： 考虑阅读文档的全部或至少更长的部分，以便更好地理解。

 var app = new Vue({
  el: '#app',
  data: {
    isHidden: false
  }
})

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>

<div id="app">
  <button v-on:click="isHidden = true">Hide the text below</button>
  <button v-on:click="isHidden = !isHidden">Toggle hide and show</button>

  <h1 v-if="!isHidden">Hide me on click event!</h1>
</div>

原文由 Michael Czechowski 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是一个非常基本的 Vue 问题。我建议您阅读指南，即使是第一页也会回答您的问题。

但是，如果您仍然需要答案，这就是您在 Vue 中隐藏/显示元素的方式。

 new Vue({
 el: '#app',
 data () {
   return {
     toggle: true
   }
 },
})

 <script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>

<div id="app">
  <button @click='toggle = !toggle'> click here </button>
  <div v-show='toggle'>showing</div>
</div>

原文由 samayo 发布，翻译遵循 CC BY-SA 3.0 许可协议