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
        }
    }

Answer 4

投票赞成的答案绝对是一种方法，但是当我尝试这样做时，它使用的是动态数组而不是单个 Div，因此是单个静态 Vue 变量不会完全削减它。

正如@samayo 所提到的，jQuery vs Vue 的隐藏操作之间没有区别，因此另一种方法是通过 jQuery 函数触发 @click。< /p>

Vue 开发工具包会告诉您不要将 JS 内联与 @click 事件混合使用，我遇到了与 @user9046370 试图将 jQuery 命令与 {{1} 内联相同的问题}}，所以无论如何，

这是另一种方法：

@click

<tr v-for="Obj1,index in Array1">
    <td >{{index}}</td>
    <td >
        <a @click="ToggleDiv('THEDiv-'+index)">Show/Hide List</a><BR>
        <div style='display:none;' :id="'THEDiv-'+index" >
            <ul><li v-for="Obj2 in Array2">{{Obj2}}</li></ul>
        </div>
    </td>
</tr>

另一个好处是，如果您想使用花哨的 Method: ToggleDiv: function(txtDivID) { $("#"+txtDivID).toggle(400); }, 转换，您可以使用此方法。

Answer 5

<template>
    <button class="btn btn-outline-secondary" type="button"><i class="fas fa-filter" @click="showFilter = !showFilter"></i></button>
</template>

<script>
    export default {
        methods:{
            showFilter() {
                eventHub.$emit('show-guest-advanced-filter');
            }
        }
    }

</script>

但是这种方法无效。

<template>
    <button class="btn btn-outline-secondary" type="button"><i class="fas fa-filter" @click="filtersMethod"></i></button>
</template>

<script>
    export default {
        data: () => ({
            filter: true,
        }),

        methods: {
            showFilter() {
                eventHub.$emit('show-guest-advanced-filter');
                this.filter = false;
            },

            hideFilter() {
                eventHub.$emit('hide-guest-advanced-filter');
                this.filter = true;
            },

            filtersMethod() {
                return this.filter ? this.showFilter() : this.hideFilter();
            }
        }
    }

</script>

这可行。

在Vue中隐藏div onclick

5 个答案: