vue实现点击隐藏与显示实例分享


Posted in Javascript onFebruary 13, 2019

如何使用vue进行按钮点击后指定区域内容隐藏,再次点击按钮隐藏内容显示。实现思路:首选需要设置一个属性为true(show:true),然后使用v-if把show属性绑定到要显示与内容的标签身上,最后给点击按钮添加点击事件,当show属性为true就设置为false,为false就设置为true(this.show = !this.show)即可。

vue实现点击隐藏与显示实例分享 

1、新建一个html页面,然后在这个代码页面上创建一个div标签id为app,然后在这个div标签里创建一个按钮标签和一个用于显示隐藏的div标签。

代码:

<div id="app">

<button >点击隐藏再点显示</button>

<div>hello world</div>

</div>

vue实现点击隐藏与显示实例分享

2、引入vue.js。在body结束标签前面使用<sctipt>引入vue.js文件。

vue实现点击隐藏与显示实例分享

3、为vue创建挂载点。在vue.js引入文件后面新建一个<sctipt>标签,然后创建vue的挂载点。

js代码:

<script>

var app = new Vue({

el:"#app",

})

</script>

vue实现点击隐藏与显示实例分享

4、使用data创建一个show属性,设置默认值为true;

使用metheds创建一个点击事件(showCont),该事件处理当show值为true就修改给false,当show为false就修改为true。

代码:

data:{

show:true

},

methods:{

showCont:function(){

this.show = !this.show;

}

}

vue实现点击隐藏与显示实例分享

5、添加显示隐藏功能。在按钮标签上添加点击事件showCont,在按钮标签后的div标签上使用v-if添加show属性。

代码:

<button @click="showCont">点击隐藏再点显示</button>

<div v-if="show">hello world</div>

vue实现点击隐藏与显示实例分享

6、保存html代码,然后使用浏览器打开,点击按钮会发现按钮后面的文字隐藏了,再次点击按钮隐藏的内容又显示出来。

vue实现点击隐藏与显示实例分享

vue实现点击隐藏与显示实例分享

7、所有代码。可以直接复制所有代码,粘贴到新建html文件后,修改引入的vue.js路径保存后使用浏览器打开即可看到效果。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div id="app"><button @click="showCont">点击隐藏再点显示</button><div v-if="show">hello world</div></div><script type="text/javascript" src="js/vue.js" ></script><所有代码。可以直接复制所有代码,粘贴到新建html文件后,修改引入的vue.js路径保存后使用浏览器打开即可看到效果。<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div id="app"><button @click="showCont">点击隐藏再点显示</button><div v-if="show">hello world</div></div><script type="text/javascript" src="js/vue.js" ></script><script>var app = new Vue({el:"#app",data:{show:true},methods:{showCont:func

script>var app = new Vue({el:"#app",data:{show:true},methods:{showCont:function(){this.show = !this.show;}}})</script></body></html>

tion(){this.show = !this.show;}}})</script></body></html>
Javascript 相关文章推荐
javascript时区函数介绍
Sep 14 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 #Javascript
JavaScript实现的拼图算法分析
Feb 13 #Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 #Javascript
Vue中CSS动画原理的实现
Feb 13 #Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 #Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 #Javascript
node.js微信小程序配置消息推送的实现
Feb 13 #Javascript
You might like
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
php 删除记录实现代码
2009/03/12 PHP
php 字符串函数收集
2010/03/29 PHP
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
Javascript 面向对象之重载
2010/05/04 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
python 使用get_argument获取url query参数
2017/04/28 Python
Python线程同步的实现代码
2018/10/03 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
基于python实现文件加密功能
2020/01/06 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
小学生红领巾广播稿
2014/01/21 职场文书
美容院考勤制度
2014/01/30 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
实习推荐信
2014/05/10 职场文书
地球一小时宣传标语
2014/06/24 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
工作失职检讨书500字
2014/10/17 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
asyncio异步编程之Task对象详解
2022/03/13 Python