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 24 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
React.js入门学习第一篇
Mar 30 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 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中常用的预定义变量小结
2012/05/09 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
JS实现随机数生成算法示例代码
2013/08/08 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python实现端口复用实例代码
2014/07/03 Python
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
python3 map函数和filter函数详解
2019/08/26 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
管事部库房保管员岗位职责
2014/02/21 职场文书
经营目标管理责任书
2014/07/25 职场文书
防灾减灾活动总结
2014/08/30 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
工作经历证明范本
2015/06/15 职场文书
大学生军训感言
2015/08/01 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
一级电子管军用接收机测评
2022/04/05 无线电
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript