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 相关文章推荐
用JS实现一个页面多个css样式实现
May 29 Javascript
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
JavaScript入门教程之引用类型
May 04 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
es6中let和const的使用方法详解
Feb 24 Javascript
Vue实现跑马灯效果
May 25 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
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
计算机系毕业生推荐信
2013/11/06 职场文书
会计学专业学生的求职信范文
2014/01/27 职场文书
代理协议书范本
2014/04/22 职场文书
集中整治工作方案
2014/05/01 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python