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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue3如何采用 App.vue定義全局變量與方法并實現(xiàn)局部頁面刷新效果,文中的示例代碼講解詳細(xì),需要的可以參考一下2024-01-01
這篇文章主要介紹了如何讓別人訪問本地運行的vue項目，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本文介紹了Vue.js在SEO優(yōu)化方面的挑戰(zhàn),并提供了一些方法來解決這些問題,包括使用服務(wù)器端渲染、預(yù)渲染和使用VueRouter的History模式來生成靜態(tài)HTML頁面,以及添加meta信息和內(nèi)部鏈接來提高搜索引擎的索引和排名2025-02-02
這篇文章主要介紹了vue綁定class的三種方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
詳解關(guān)于element級聯(lián)選擇器數(shù)據(jù)回顯問題
這篇文章主要介紹了詳解關(guān)于element級聯(lián)選擇器數(shù)據(jù)回顯問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
淺談vue自定義全局組件并通過全局方法 Vue.use() 使用該組件
本篇文章主要介紹了vue自定義全局組件并通過全局方法 Vue.use() 使用該組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要給大家分享的是Vue3的幾個優(yōu)勢，Vue3仍然在源碼、性能和語法 API 三個大的方面進(jìn)行了優(yōu)化，下面我們一起進(jìn)入文章看看具體詳情吧2021-10-10
Vite是一個開發(fā)環(huán)境工具，旨在提高我們的開發(fā)速度,下面這篇文章主要給大家介紹了關(guān)于如何為老vue項目添加vite支持的相關(guān)資料,需要的朋友可以參考下2021-09-09
Vue el-table表頭上引入組件不能實時傳參解決方法分析
這篇文章主要介紹了Vue el-table表頭上引入組件不能實時傳參解決方法，總的來說這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路2022-11-11
這篇文章主要介紹了vue - props 聲明數(shù)組和對象操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07