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

来源：懂视网责编：小OO 时间：2020-11-27 19:40:03

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

实例代码。<。<；/p>；<；/p>；<；script type="；text/javascript"；>；new Vue({el："；#example"；，data：{btnText："；隐藏"；，isShow：true}，methods：{showToggle：function(){this.isShow =。this.isShowif(this.isShow){this.btnText = "；隐藏"；}else{this.btnText = "；显示"；}}}})<；/script>；<；/body>；<；/html>；

推荐度：

点击下载本文 文档为doc格式

导读实例代码。<。<；/p>；<；/p>；<；script type="；text/javascript"；>；new Vue({el："；#example"；，data：{btnText："；隐藏"；，isShow：true}，methods：{showToggle：function(){this.isShow =。this.isShowif(this.isShow){this.btnText = "；隐藏"；}else{this.btnText = "；显示"；}}}})<；/script>；<；/body>；<；/html>；

下面我就为大家分享一篇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>

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

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

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

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