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 相关文章推荐
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
Javascript 继承实现例子
Aug 12 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
vue cli安装使用less的教程详解
Jul 12 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 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判断变量是否为0的方法
2014/02/08 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
调试Python程序代码的几种方法总结
2015/04/28 Python
Python模拟百度登录实例详解
2016/01/20 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
pyqt5自定义信号实例解析
2018/01/31 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
精选干货:Java精选笔试题附答案
2014/01/18 面试题
中专毕业个人的自荐信格式
2013/09/21 职场文书
博士研究生自我鉴定范文
2013/12/04 职场文书
环境工程专业个人求职信
2013/12/05 职场文书
大专生毕业的自我评价
2014/02/06 职场文书
教师对学生的寄语
2014/04/03 职场文书
护林防火标语
2014/06/27 职场文书
科学发展观演讲稿
2014/09/11 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书