在Vue.js中点击隐藏div

Question

Vue.js的等价于以下jQuery代码是什么？

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

- user9046370

---

https://vuejs.org/v2/guide/conditional.html - Bert

Answer 1

jQuery可以直接使用，而Vue.js不行。要初始化Vue.js组件或应用程序，您必须将该组件与其数据绑定到模板中的一个特定HTML标签上。

在这个例子中，指定的元素是

，通过el: #app进行定位。这一点您可以从jQuery中了解到。

在声明一个变量来保存切换状态之后，比如isHidden，在data对象内部必须声明初始状态为false。

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

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

注意：为了更好地理解，请考虑阅读整篇或至少较长的文档部分。

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>

- Michael Czechowski

---

刚刚将这个答案设为最佳答案，因为这个答案解决了我的问题。非常感谢你的帮助！ - user9046370

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>

- samayo

---

我最初也是用类似的方式做的，但是在 @click 上遇到了一些语法问题。 - user9046370

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

- Adam Colton

Answer 4

被点赞的答案绝对是一种方法，但当我尝试使用动态数组而不是单个

时，单个静态变量就无法胜任了。

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

Vue Dev kit会告诉您不要在@click事件中混合JS内联，并且我与@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 过渡效果，你可以采用这种方法。

- Bryce Rakop

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>

这个可以运行。

- Kerim Kuşcu

---

这并没有真正回答问题。如果您有不同的问题，可以通过点击提问来提出。一旦您拥有足够的声望，您还可以添加赏金以吸引更多关注此问题。- 来自审核 - Akber Iqbal

我解决了这个问题，但是我分享出来是为了指导。如果你分享真相而不是把它写出来会更有用。 - Kerim Kuşcu