在本篇文章中小編給大家分享了vue如何實現點擊隱藏與顯示的相關內容，有需要的朋友們跟着學習下。
如何使用vue進行按鈕點擊後指定區域內容隱藏，再次點擊按鈕隱藏內容顯示。實現思路：首選需要設置一個屬性爲true(show:true)，然後使用v-if把show屬性綁定到要顯示與內容的標籤身上，最後給點擊按鈕添加點擊事件，當show屬性爲true就設置爲false，爲false就設置爲true(this.show = !this.show)即可。
1、新建一個html頁面，然後在這個代碼頁面上創建一個div標籤id爲app，然後在這個div標籤裏創建一個按鈕標籤和一個用於顯示隱藏的div標籤。
代碼：
<div id="app"> <button >點擊隱藏再點顯示</button> <div>hello world</div> </div>
2、引入vue.js。在body結束標籤前面使用<sctipt>引入vue.js文件。
3、爲vue創建掛載點。在vue.js引入文件後面新建一個<sctipt>標籤，然後創建vue的掛載點。
js代碼：
<script>
var app = new Vue({
el:"#app",
})
</script>
4、使用data創建一個show屬性，設置默認值爲true；
使用metheds創建一個點擊事件（showCont），該事件處理當show值爲true就修改給false，當show爲false就修改爲true。
代碼：
data:{
show:true
},
methods:{
showCont:function(){
this.show = !this.show;
}
}
5、添加顯示隱藏功能。在按鈕標籤上添加點擊事件showCont，在按鈕標籤後的div標籤上使用v-if添加show屬性。
代碼：
<button @click="showCont">點擊隱藏再點顯示</button>
<div v-if="show">hello world</div>
6、保存html代碼，然後使用瀏覽器打開，點擊按鈕會發現按鈕後面的文字隱藏了，再次點擊按鈕隱藏的內容又顯示出來。
7、所有代碼。可以直接複製所有代碼，粘貼到新建html文件後，修改引入的vue.js路徑保存後使用瀏覽器打開即可看到效果。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div id="app"><button @click="showCont">點擊隱藏再點顯示</button><div v-if="show">hello world</div></div><script type="text/javascript" src="js/vue.js" ></script><所有代碼。可以直接複製所有代碼，粘貼到新建html文件後，修改引入的vue.js路徑保存後使用瀏覽器打開即可看到效果。<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div id="app"><button @click="showCont">點擊隱藏再點顯示</button><div v-if="show">hello world</div></div><script type="text/javascript" src="js/vue.js" ></script><script>var app = new Vue({el:"#app",data:{show:true},methods:{showCont:func
script>var app = new Vue({el:"#app",data:{show:true},methods:{showCont:function(){this.show = !this.show;}}})</script></body></html>
tion(){this.show = !this.show;}}})</script></body></html>