在 Vue.js 中隐藏 div onclick

Posted 2023-02-22

【中文标题】在 Vue.js 中隐藏 div onclick

【英文标题】：Hide div onclick in Vue.js

【发布时间】：2018-08-02 09:43:37

【问题描述】：

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

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

【问题讨论】：

vuejs.org/v2/guide/conditional.html

【参考方案1】：

jQuery 开箱即用，而 Vue.js 不行。要初始化 Vue.js 组件或应用程序，您必须将该组件及其数据绑定到模板中的一个特定 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>

【讨论】：

只是将其作为答案而不是其他答案，因为这是解决我需要的答案。非常感谢您的帮助！

【参考方案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>

【讨论】：

我最初是用类似的方式做的，但是@click 出现了一些语法问题。

这正是v-show 所做的。它隐藏了一个元素，就像 jQuery 代码：$('.hideme').hide(); op 张贴。

【参考方案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
        
    

【参考方案4】：

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

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

Vue 开发工具包会告诉你不要将 JS 内联与 ​​@click 事件混合，我遇到了与 @user9046370 尝试将 jQuery 命令内联与 @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);
,

另一个好处是，如果您想使用花哨的jQuery 转换，您可以使用此方法。

【参考方案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>

这行得通。

【讨论】：

这并不能真正回答问题。如果您有其他问题，可以点击 进行提问。一旦你有足够的reputation，你也可以add a bounty 来引起对这个问题的更多关注。 - From Review

我解决了这个问题，但我分享了它以供指导。如果你分享真相而不是写出来，它会更有用。