简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

Vue.js click button to show/hide content

亚连
Release： 2018-06-07 11:14:01
Original
5372 people have browsed it

Below I will share with you an example code of Vue.js showing/hiding content by clicking a button. It has a good reference value and I hope it will be helpful to everyone.

Example code: 

<!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>
Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Use mint-ui to achieve the three-level linkage effect of provinces and municipalities

Use vue2.0.js to achieve multiple Cascading selector

Compare the time of the same day through JavaScript

The above is the detailed content of Vue.js click button to show/hide content. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
vue.js show click button hide
source：php.cn
Previous article：How to prevent click events from bubbling in vue Next article：How to operate ajax request and axios package
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Scatterplot points do not maintain values ​​when zooming in d3.js This is my first time using d3.js, so please bear with me. I implemented it as pure JavaSc...
From 2024-04-06 18:16:26
0
1
403
Choose the appropriate application architecture to handle bearer tokens I want to use an API that uses OAuth2.0 In short, I need to obtain an access token that I ...
From 2024-04-04 08:55:57
0
1
353
Create an API pull for Vue.js I don't know what's wrong with me or why this isn't working, I just want the random dog ph...
From 2024-04-03 16:12:29
0
1
363
Vue.js data values ​​remain unchanged I have a data called: cat_pressed and this function that changes the data value: changeCat...
From 2024-04-03 09:29:23
0
1
369
Best practices for using getters and/or computed properties in Vue.js I love vue.js and I definitely love computed properties and VueXgetters. But I've reached ...
From 2024-04-01 18:22:49
0
1
431
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！