在Vue.js中隐藏div onclick
在Vue.js中隐藏div onclick
提问于 2018-02-22 21:52:38
以下jQuery的Vue.js等价物是什么？
$('.btn').click(function(){ $('.hideMe').hide() });回答 3
Stack Overflow用户
发布于 2018-02-22 21:59:51
这是一个非常基本的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>
Stack Overflow用户
发布于 2018-12-12 17:55:51
<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
}
}Stack Overflow用户
发布于 2019-02-15 18:13:25
<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>这是可行的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48929139
复制相关文章
相似问题