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 如何实现对数据库的增删改查
Nov 23 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
javascript冒泡排序小结
Apr 10 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
jQuery对象的链式操作用法分析
May 10 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 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
php5.3 注意事项说明
2013/07/01 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
[00:14]护身甲盾
2019/03/06 DOTA
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
使用Python读取大文件的方法
2018/02/11 Python
python和shell获取文本内容的方法
2018/06/05 Python
Python GUI编程完整示例
2019/04/04 Python
详解python中的index函数用法
2019/08/06 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
最新英语专业学生求职信范文
2013/09/21 职场文书
材料加工硕士生求职信
2013/10/10 职场文书
保安队长职务说明书
2014/02/23 职场文书
获奖感言范文
2015/07/31 职场文书
党员反四风学习心得体会
2016/01/22 职场文书