在 Vue.js 中隐藏 div onclick [英] Hide div onclick in Vue.js

问题描述

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

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

解决方案

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

在此示例中，指定的元素是

并通过 el:#app 定位.你会从 jQuery 中了解到这一点.

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

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

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

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

var app = new Vue({el: '#app',数据: {isHidden: 假}})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script><div id="应用程序"><button v-on:click="isHidden = true">隐藏下面的文字</button><button v-on:click="isHidden = !isHidden">切换隐藏和显示</button><h1 v-if="!isHidden">在点击事件时隐藏我！</h1>

What is the Vue.js equivalent of the following jQuery?

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

解决方案

jQuery works out of the box, Vue.js does not. To initialize Vue.js component or App you must bind that component with its data to one specific HTML tag inside your template.

In this example the specified element is <div id="app"></div> and is targeted through el: #app. This you will know from jQuery.

After you declare some variable that holds the toggle state, in this case been isHidden, the initial state is false and has to be declared inside the data object.

The rest is Vue-specific code like v-on:click="" and v-if="". For better understand please read the documentation of Vue.js:

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

Note: consider reading the whole or at least longer parts of the documentation for better understanding.

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>

这篇关于在 Vue.js 中隐藏 div onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！