如何使用vue進行按鈕點擊后指定區(qū)域內(nèi)容隱藏，再次點擊按鈕隱藏內(nèi)容顯示。實現(xiàn)思路：首選需要設(shè)置一個屬性為true(show:true)，然后使用v-if把show屬性綁定到要顯示與內(nèi)容的標簽身上，最后給點擊按鈕添加點擊事件，當show屬性為true就設(shè)置為false，為false就設(shè)置為true(this.show = !this.show)即可。
1、新建一個html頁面，然后在這個代碼頁面上創(chuàng)建一個div標簽id為app，然后在這個div標簽里創(chuàng)建一個按鈕標簽和一個用于顯示隱藏的div標簽。
代碼：
<div id="app"><button >點擊隱藏再點顯示</button><div>hello world</div></div>
2、引入vue.js。在body結(jié)束標簽前面使用<sctipt>引入vue.js文件。
3、為vue創(chuàng)建掛載點。在vue.js引入文件后面新建一個<sctipt>標簽，然后創(chuàng)建vue的掛載點。
js代碼：
<script>var app = new Vue({el:"#app",})</script>
4、使用data創(chuàng)建一個show屬性，設(shè)置默認值為true；
使用metheds創(chuàng)建一個點擊事件（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代碼，然后使用瀏覽器打開，點擊按鈕會發(fā)現(xiàn)按鈕后面的文字隱藏了，再次點擊按鈕隱藏的內(nèi)容又顯示出來。
7、所有代碼。可以直接復(fù)制所有代碼，粘貼到新建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><所有代碼。可以直接復(fù)制所有代碼，粘貼到新建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:funcscript>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>新聞熱點
疑難解答
