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 树控件 比较好用
Jun 11 Javascript
用JS实现一个TreeMenu效果分享
Aug 28 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
uniapp,微信小程序中使用 MQTT的问题
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
聊天室php&amp;mysql(三)
2006/10/09 PHP
使用php来实现网络服务
2009/09/15 PHP
php操作JSON格式数据的实现代码
2011/12/24 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
Python内置数据类型详解
2014/08/18 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
美国在线咖啡、茶和餐厅供应商:LollicupStore
2018/05/04 全球购物
七年级政治教学反思
2014/02/03 职场文书
房产继承公证书
2014/04/09 职场文书
教师见习报告范文
2014/11/03 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
给学校的建议书400字
2015/09/14 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python