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 相关文章推荐
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 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 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
php广告加载类用法实例
2014/09/23 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
php提交post数组参数实例分析
2015/12/17 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
使用Python的turtle模块画国旗
2019/09/24 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
学校春季防火方案
2014/06/08 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js