简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

Vue.js 点击按钮显示/隐藏内容

亚连
Lepaskan： 2018-06-07 11:14:01
asal
5296 orang telah melayarinya

下面我就为大家分享一篇Vue.js 点击按钮显示/隐藏内容的实例代码，具有很好的参考价值，希望对大家有所帮助。

实例代码：

<!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>
	<p id="example">
		<button v-text="btnText" @click="showToggle"></button>
		<p v-show="isShow">原本可以成为Google、Facebook的“爸爸”，或者微软的“儿子”，最后却像“孙子”一样被贱卖，沦为互联网浪潮的“弃子”。</p>
	</p>
	<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>
Salin selepas log masuk

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用mint-ui实现省市区三级联动效果

使用vue2.0.js实现多级联动选择器

通过JavaScript实现比较同一天的时间大小

Atas ialah kandungan terperinci Vue.js 点击按钮显示/隐藏内容. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
vue.js 显示 butang klik 隐藏
sumber：php.cn
Artikel sebelumnya：在vue中如何阻止click事件冒泡 Artikel seterusnya：怎样操作ajax请求与axios包
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bagaimana untuk mengikat v-model kepada kaedah dalam Vue.js Saya sedang belajar vuejs(3). Saya mempunyai gelung ini: <trv-for="indexin7":...
daripada 2023-11-05 16:36:26
0
1
193
Isu dengan Vue.js 3 dan Pinia Getters Saya beralih daripada Angular kepada Vue.js dan cuba memahami seni binanya. Saya kini terp...
daripada 2023-11-03 18:52:56
0
1
244
Buat butang tersuai untuk navigasi slaid dalam Swiper menggunakan Vue.js Saya perlu mengalih keluar navigasi lalai (nextEl, prevEl) dan membuat butang dengan teks ...
daripada 2023-11-02 14:42:51
0
1
174
Vue.js 3 v-for menyebabkan masalah dengan fungsi mod Tailwind/Flowbite Saya cuba memanggil corak tailwind daripada jadual di mana baris dijana menggunakan v-for ...
daripada 2023-11-02 13:36:09
0
1
300
Cara mengisytiharkan data tatasusunan objek dalam vue.js + typescript Saya mempunyai kod ini dalam vue.js3+typescript, saya hanya mahu mengisytiharkan tatasusun...
daripada 2023-11-02 12:50:34
0
1
280
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！