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

问题描述

如何在单击Vue.js时隐藏元素?隐藏的只有一个元素.

How can I hide an element with Vue.js when it is clicked? There's only one element to hide.

jQuery解决方案如下:

A jQuery solution would look like that:

$('.button').click(function() {
  $('.hideme').hide();
);

但是Vue.js的等效项是什么?

推荐答案

首先，jQuery可以直接使用.这是一个主要区别.因此，您必须初始化Vue组件或App.您正在将该组件及其数据绑定到模板中的一个特定HTML标记.在此示例中，指定的元素为<div id="app"></div>，并通过el: #app作为目标.您将从jQuery中了解到这一点.

First of all jQuery works out of the box. This is one main difference. So you have to initialize your Vue Component or App. You are binding 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.

之后，您声明一些保持切换状态的变量.在这种情况下，它是isHidden.初始状态为false，必须在data对象内部声明.

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

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

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

• Vue实例 https://vuejs.org/v2/guide/instance.html
• 模板语法 https://vuejs.org/v2/guide/syntax.html
• 事件处理 https://vuejs.org/v2/guide/events.html#Listening-to-Events
• 条件 https://vuejs.org/v2/guide/conditional.html

• The Vue Instance https://vuejs.org/v2/guide/instance.html
• Template Syntax https://vuejs.org/v2/guide/syntax.html
• Event Handling https://vuejs.org/v2/guide/events.html#Listening-to-Events
• Conditionals https://vuejs.org/v2/guide/conditional.html

如果您想快速浏览一下，建议您按此顺序阅读.但是请考虑阅读文档的全部或至少更长的部分，以便更好地理解.

I am recommening you to read in this order if you want to get a quick overview. But please 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中隐藏div onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！