编程 Javascript

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 点击按钮显示/隐藏内容的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

- Author -

h5css3_linhuai

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

FireFox中textNode分片的问题

Apr 10 Javascript

javascript GUID生成器实现代码

Oct 31 Javascript

JavaScript 编写匿名函数的几种方法

Feb 21 Javascript

ExtJS 设置级联菜单的默认值

Jun 13 Javascript

一些javascript一些题目的解析

Dec 25 Javascript

jQuery 1.7.2中getAll方法的疑惑分析

May 23 Javascript

JavaScript使用indexOf获得子字符串在字符串中位置的方法

Apr 06 Javascript

AngularJS的一些基本样式初窥

Jul 27 Javascript

利用JS实现简单的瀑布流加载图片效果

Apr 22 Javascript

详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法

Aug 09 jQuery

小程序云开发如何实现图片上传及发表文字

May 17 Javascript

微信小程序swiper左右扩展各显示一半代码实例

Dec 05 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的cms

2010/12/19 PHP

php 短链接算法收集与分析

2011/12/30 PHP

记录PHP错误日志 display_errors与log_errors的区别

2012/10/09 PHP

php读取远程gzip压缩网页的方法

2014/12/29 PHP

smarty模板引擎之分配数据类型

2015/03/30 PHP

详解php语言最牛掰的Laravel框架

2017/11/20 PHP

javascript 动态table添加colspan\rowspan 参数的方法

2009/07/25 Javascript

cnblogs csdn 代码运行框实现代码

2009/11/02 Javascript

jquery键盘事件使用介绍

2011/11/01 Javascript

js流动式效果显示当前系统时间

2016/05/16 Javascript

jQuery中DOM节点删除之empty与remove

2017/01/20 Javascript

浅谈JavaScript中的属性:如何遍历属性

2017/09/14 Javascript

快速解决vue-cli不能初始化webpack模板的问题

2018/03/20 Javascript

webpack4+Vue搭建自己的Vue-cli项目过程分享

2018/08/29 Javascript

vue填坑之webpack run build 静态资源找不到的解决方法

2018/09/03 Javascript

JavaScript设计模式之命令模式实例分析

2019/01/16 Javascript

JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析

2019/05/22 Javascript

JS阻止事件冒泡的方法详解

2019/08/26 Javascript

layui table 表格模板按钮的实例代码

2019/09/21 Javascript

jQuery实现简单评论功能

2020/08/19 jQuery

基于jquery实现彩色投票进度条代码解析

2020/08/26 jQuery

python操作mysql数据库

2017/03/05 Python

Python守护线程用法实例

2017/06/23 Python

PyQt5实现拖放功能

2018/04/25 Python

numpy 进行数组拼接,分别在行和列上合并的实例

2018/05/08 Python

django Admin文档生成器使用详解

2019/07/22 Python

Python字典深浅拷贝与循环方式方法详解

2020/02/09 Python

python设置环境变量的作用整理

2020/02/17 Python

利用Python将多张图片合成视频的实现

2020/11/23 Python

中国最大的名表商城：万表网

2016/08/29 全球购物

如何在Cookie里面保存Unicode和国际化字符

2013/05/25 面试题

考博自荐信

2013/10/25 职场文书

工商治理实习生的自我评价分享

2014/02/20 职场文书

社区班子对照检查材料

2014/08/27 职场文书

领导班子对照检查剖析材料

2014/10/13 职场文书

2014年图书室工作总结

2014/12/09 职场文书