vue實(shí)現(xiàn)點(diǎn)擊隱藏與顯示實(shí)例分享

如何使用vue進(jìn)行按鈕點(diǎn)擊后指定區(qū)域內(nèi)容隱藏，再次點(diǎn)擊按鈕隱藏內(nèi)容顯示。實(shí)現(xiàn)思路：首選需要設(shè)置一個(gè)屬性為true(show:true)，然后使用v-if把show屬性綁定到要顯示與內(nèi)容的標(biāo)簽身上，最后給點(diǎn)擊按鈕添加點(diǎn)擊事件，當(dāng)show屬性為true就設(shè)置為false，為false就設(shè)置為true(this.show = !this.show)即可。

10年積累的成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先做網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有羅平免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

vue實(shí)現(xiàn)點(diǎn)擊隱藏與顯示實(shí)例分享 

1、新建一個(gè)html頁(yè)面，然后在這個(gè)代碼頁(yè)面上創(chuàng)建一個(gè)div標(biāo)簽id為app，然后在這個(gè)div標(biāo)簽里創(chuàng)建一個(gè)按鈕標(biāo)簽和一個(gè)用于顯示隱藏的div標(biāo)簽。

代碼：

<div id="app">

<button >點(diǎn)擊隱藏再點(diǎn)顯示</button>

<div>hello world</div>

</div>

vue實(shí)現(xiàn)點(diǎn)擊隱藏與顯示實(shí)例分享

2、引入vue.js。在body結(jié)束標(biāo)簽前面使用<sctipt>引入vue.js文件。

vue實(shí)現(xiàn)點(diǎn)擊隱藏與顯示實(shí)例分享

3、為vue創(chuàng)建掛載點(diǎn)。在vue.js引入文件后面新建一個(gè)<sctipt>標(biāo)簽，然后創(chuàng)建vue的掛載點(diǎn)。

js代碼：

<script>

var app = new Vue({

el:"#app",

})

</script>

vue實(shí)現(xiàn)點(diǎn)擊隱藏與顯示實(shí)例分享

4、使用data創(chuàng)建一個(gè)show屬性，設(shè)置默認(rèn)值為true；

使用metheds創(chuàng)建一個(gè)點(diǎn)擊事件（showCont），該事件處理當(dāng)show值為true就修改給false，當(dāng)show為false就修改為true。

代碼：

data:{

show:true

},

methods:{

showCont:function(){

this.show = !this.show;

}

}

vue實(shí)現(xiàn)點(diǎn)擊隱藏與顯示實(shí)例分享

5、添加顯示隱藏功能。在按鈕標(biāo)簽上添加點(diǎn)擊事件showCont，在按鈕標(biāo)簽后的div標(biāo)簽上使用v-if添加show屬性。

代碼：

<button @click="showCont">點(diǎn)擊隱藏再點(diǎn)顯示</button>

<div v-if="show">hello world</div>

vue實(shí)現(xiàn)點(diǎn)擊隱藏與顯示實(shí)例分享

6、保存html代碼，然后使用瀏覽器打開，點(diǎn)擊按鈕會(huì)發(fā)現(xiàn)按鈕后面的文字隱藏了，再次點(diǎn)擊按鈕隱藏的內(nèi)容又顯示出來。

vue實(shí)現(xiàn)點(diǎn)擊隱藏與顯示實(shí)例分享

vue實(shí)現(xiàn)點(diǎn)擊隱藏與顯示實(shí)例分享

7、所有代碼?？梢灾苯訌?fù)制所有代碼，粘貼到新建html文件后，修改引入的vue.js路徑保存后使用瀏覽器打開即可看到效果。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div id="app"><button @click="showCont">點(diǎn)擊隱藏再點(diǎn)顯示</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">點(diǎn)擊隱藏再點(diǎn)顯示</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>

當(dāng)前題目：vue實(shí)現(xiàn)點(diǎn)擊隱藏與顯示實(shí)例分享
文章起源：http://www.muchs.cn/article12/pgdggc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、域名注冊(cè)、電子商務(wù)、面包屑導(dǎo)航、標(biāo)簽優(yōu)化、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

手機(jī)網(wǎng)站建設(shè)