Vue.js 點擊按鈕顯示/隱藏內(nèi)容的實例代碼
更新時間：2018年02月08日 09:24:06 作者：h5css3_linhuai
下面小編就為大家分享一篇Vue.js 點擊按鈕顯示/隱藏內(nèi)容的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
實例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue點擊切換顯示隱藏</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 點擊按鈕顯示/隱藏內(nèi)容的實例代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue組件的層級關系，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
Element el-table的formatter和scope?template不能同時存在問題解決辦法
本文主要介紹了ElementUI?el-table?的?formatter?和?scope?template?不能同時存在問題解決辦法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了Vue實現(xiàn)生成本地Json文件功能方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家詳細介紹了如何利用Vue.js編寫一個拼圖華容道游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue中使用input[type="file"]實現(xiàn)文件上傳功能
這篇文章主要介紹了vue中使用input[type="file"]實現(xiàn)文件上傳功能，實現(xiàn)代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
這篇文章主要為大家詳細介紹了vue+Element實現(xiàn)登錄隨機驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
electron-vue?項目添加啟動loading動畫的實現(xiàn)思路
electron-vue腳手架搭建的項目，在開發(fā)階段可能你注意不到項目啟動慢的問題，但是在build?生成的exe可執(zhí)行文件，啟動后，要反應很久才能進入到app.vue?中加載的頁面，體驗性很差，本文給大家介紹electron?vue啟動動畫效果的實例代碼，感興趣的朋友一起看看吧2022-01-01
這篇文章主要介紹了基于Vue和Element-Ui搭建項目的方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細介紹了vue使用rules實現(xiàn)表單字段驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
滑塊驗證是一種常見的人機識別方法，這篇文章主要介紹了Vue滑塊驗證碼組件anji-captcha的使用,本文通過實例代碼圖文相結合給大家介紹的非常詳細，需要的朋友可以參考下2023-05-05