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 相关文章推荐
jQuery EasyUI 入门必看
Jun 03 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
shiro授权的实现原理
Sep 21 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 Javascript
Vue如何将页面导出成PDF文件
Aug 17 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
Feb 24 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模板,主要想体现一下思路
2006/12/25 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
Augularjs-起步详解
2016/07/08 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
详解python 发送邮件实例代码
2016/12/22 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
在Python中COM口的调用方法
2019/07/03 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
电信专业毕业生推荐信
2013/11/18 职场文书
房地产端午节活动方案
2014/08/24 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
打架检讨书范文
2015/01/27 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
小学班长竞选稿
2015/11/20 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS