search

Home >Web Front-end >JS Tutorial >Vue.js click button to show/hide content

Vue.js click button to show/hide content

亚连
亚连Original
2018-06-07 11:14:015419browse

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>

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!

Statement：
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
Previous article：How to prevent click events from bubbling in vueNext article：How to prevent click events from bubbling in vue

Related articles

See more