在Vue中隐藏div onclick

Question

单击时如何用Vue.js隐藏元素？只有一个要隐藏的元素.

一个jQuery解决方案看起来像这样:

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

但是Vue.js与此相当的是什么？

Answer 1

首先,jQuery开箱即用.这是一个主要的区别.所以你必须初始化你的Vue组件或应用程序.您将该组件及其数据绑定到模板中的一个特定HTML标记.在此示例中,指定的元素是<div id="app"></div>并且是通过目标el: #app.这将从jQuery中了解到.

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

其余的是特定于Vue的代码,如v-on:click=""和v-if="".为了更好地理解,请阅读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

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

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>

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>

Answer 3

<div>
    <div>

        <button v-on:click="isHidden = !isHidden">Toggle hide and show</button>

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

name: "Modal",
    data () {
        return {
            isHidden: false
        }
    }