cari

Rumah >hujung hadapan web >tutorial js >Vue.js 点击按钮显示/隐藏内容

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

亚连
亚连asal
2018-06-07 11:14:015392semak imbas

下面我就为大家分享一篇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实现比较同一天的时间大小

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

Kenyataan：
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 sebelumnya：在vue中如何阻止click事件冒泡Artikel seterusnya：怎样操作ajax请求与axios包

Artikel berkaitan

Lihat lagi