简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

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

亚连
发布： 2018-06-07 11:14:01
原创
5362 人浏览过

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

以上是Vue.js 点击按钮显示/隐藏内容的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
vue.js 显示 点击按钮 隐藏
来源：php.cn
上一篇：在vue中如何阻止click事件冒泡 下一篇：怎样操作ajax请求与axios包
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
放大 d3.js 时散点图点不会保持值 这是我第一次使用d3.js，所以请耐心等待。我在vue.js文件中将其作为纯JavaScript实现。我正在尝试制作具有缩放功能的散点图。到目前为止，我几乎一切正常，但当我缩放时，...
来自于 2024-04-06 18:16:26
0
1
403
选择适当的应用程序架构来处理不记名令牌 我想使用使用OAuth2.0的API简而言之，我需要获取一个访问令牌，我必须将其包含在每个后续请求中，以便服务器可以确认我的身份。在应用程序中执行此操作的架构会是什么样子？有人可以...
来自于 2024-04-04 08:55:57
0
1
353
为 Vue.js 创建 API 拉取 我不知道我出了什么问题，也不知道为什么这不起作用，我只是想让随机狗的照片api工作，但它不起作用。请参阅下面的代码。exportdefault{data(){return{post...
来自于 2024-04-03 16:12:29
0
1
363
Vue.js 数据值保持不变 我有一个名为：cat_pressed的数据还有这个改变数据值的函数：changeCat(){this.cat_pressed==='brauh'}但是每当我调用该函数时，该值都不会...
来自于 2024-04-03 09:29:23
0
1
369
Vue.js中使用getter和/或计算属性的最佳实践 我喜欢vue.js，我肯定喜欢计算属性和VueXgetters。但是我到了一个不确定的地步，不确定我使用它们的方式是否会在性能方面有一些缺点。这是我代码中的一个常见模式（对于本地组...
来自于 2024-04-01 18:22:49
0
1
431
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！