javascript - 在 Vue.js 中隐藏 div onclick

Question

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

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

Answer 1

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

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

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

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

• The Vue Instance
• Template Syntax
• Event Handling
• Conditionals

注意:考虑阅读整个文档或至少阅读文档的较长部分以便更好地理解。

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>