Vue.js 點(diǎn)擊按鈕顯示/隱藏內(nèi)容的實(shí)例代碼
更新時間：2018年02月08日 09:24:06 作者：h5css3_linhuai
下面小編就為大家分享一篇Vue.js 點(diǎn)擊按鈕顯示/隱藏內(nèi)容的實(shí)例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
實(shí)例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue點(diǎn)擊切換顯示隱藏</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="example">
<button v-text="btnText" @click="showToggle"></button>
<p v-show="isShow">原本可以成為Google、Facebook的“爸爸”，或者微軟的“兒子”，最后卻像“孫子”一樣被賤賣，淪為互聯(lián)網(wǎng)浪潮的“棄子”。</p>
</div>
<script type="text/javascript">
new Vue({
el:"#example",
data:{
btnText:"隱藏",
isShow:true
},
methods:{
showToggle:function(){
this.isShow = !this.isShow
if(this.isShow){
this.btnText = "隱藏"
}else{
this.btnText = "顯示"
}
}
}
})
</script>
</body>
</html>
以上這篇Vue.js 點(diǎn)擊按鈕顯示/隱藏內(nèi)容的實(shí)例代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vueJS簡單的點(diǎn)擊顯示與隱藏的效果【實(shí)現(xiàn)代碼】
- vue實(shí)現(xiàn)點(diǎn)擊隱藏與顯示實(shí)例分享
- vue 點(diǎn)擊展開顯示更多(點(diǎn)擊收起部分隱藏)
- vue組件實(shí)現(xiàn)彈出框點(diǎn)擊顯示隱藏效果
- Vue實(shí)現(xiàn) 點(diǎn)擊顯示再點(diǎn)擊隱藏效果(點(diǎn)擊頁面空白區(qū)域也隱藏效果)
- Vue 實(shí)現(xiàn)顯示/隱藏層的思路（加全局點(diǎn)擊事件）
- vue實(shí)現(xiàn)點(diǎn)擊某個div顯示與隱藏內(nèi)容功能實(shí)例
相關(guān)文章
這篇文章主要介紹了Vue組件的層級關(guān)系，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Element el-table的formatter和scope?template不能同時存在問題解決辦法
本文主要介紹了ElementUI?el-table?的?formatter?和?scope?template?不能同時存在問題解決辦法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue實(shí)現(xiàn)生成本地Json文件功能方式
這篇文章主要介紹了Vue實(shí)現(xiàn)生成本地Json文件功能方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家詳細(xì)介紹了如何利用Vue.js編寫一個拼圖華容道游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue中使用input[type="file"]實(shí)現(xiàn)文件上傳功能
這篇文章主要介紹了vue中使用input[type="file"]實(shí)現(xiàn)文件上傳功能，實(shí)現(xiàn)代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
vue+Element實(shí)現(xiàn)登錄隨機(jī)驗證碼
這篇文章主要為大家詳細(xì)介紹了vue+Element實(shí)現(xiàn)登錄隨機(jī)驗證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
electron-vue?項目添加啟動loading動畫的實(shí)現(xiàn)思路
electron-vue腳手架搭建的項目，在開發(fā)階段可能你注意不到項目啟動慢的問題，但是在build?生成的exe可執(zhí)行文件，啟動后，要反應(yīng)很久才能進(jìn)入到app.vue?中加載的頁面，體驗性很差，本文給大家介紹electron?vue啟動動畫效果的實(shí)例代碼，感興趣的朋友一起看看吧2022-01-01
這篇文章主要介紹了基于Vue和Element-Ui搭建項目的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細(xì)介紹了vue使用rules實(shí)現(xiàn)表單字段驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
滑塊驗證是一種常見的人機(jī)識別方法，這篇文章主要介紹了Vue滑塊驗證碼組件anji-captcha的使用,本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05