快捷導(dǎo)航

Vue.js 點(diǎn)擊按鈕顯示/隱藏內(nèi)容的實(shí)例代碼

更新時(shí)間：2018年02月08日 09:24:06 作者：h5css3_linhuai

下面小編就為大家分享一篇Vue.js 點(diǎn)擊按鈕顯示/隱藏內(nèi)容的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

實(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í)例代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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