Vue.js 点击按钮显示/隐藏内容的实例代码


Posted in Javascript onFebruary 08, 2018

实例代码:

<!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>
	<div id="example">
		<button v-text="btnText" @click="showToggle"></button>
		<p v-show="isShow">原本可以成为Google、Facebook的“爸爸”,或者微软的“儿子”,最后却像“孙子”一样被贱卖,沦为互联网浪潮的“弃子”。</p>
	</div>
	<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>

以上这篇Vue.js 点击按钮显示/隐藏内容的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
关于文本框的一些限制控制总结~~
Apr 15 Javascript
Javascript 去除数组的重复元素
May 04 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
Jul 10 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 #Javascript
Ionic学习日记实现验证码倒计时
Feb 08 #Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 #Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 #Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 #Javascript
Vue组件通信的四种方式汇总
Feb 08 #Javascript
Vue Socket.io源码解读
Feb 07 #Javascript
You might like
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
Python通过正则表达式选取callback的方法
2015/07/18 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
结对共建协议书
2014/08/20 职场文书
诉讼和解协议书
2016/03/23 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
MySql分区类型及创建分区的方法
2022/04/13 MySQL
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS
Javascript webpack动态import
2022/04/19 Javascript