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 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
显示js对象所有属性和方法的函数
Oct 16 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
基于socket.io和node.js搭建即时通信系统
Jul 30 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
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文件的实现方法
2007/03/19 PHP
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
python持久性管理pickle模块详细介绍
2015/02/18 Python
python登录豆瓣并发帖的方法
2015/07/08 Python
Python进程间通信之共享内存详解
2017/10/30 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
Python多进程fork()函数详解
2019/02/22 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
python lambda的使用详解
2021/02/26 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
应聘教师推荐信
2013/10/31 职场文书
中学运动会广播稿
2014/01/19 职场文书
黄河的主人教学反思
2014/02/07 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书
学习十八大报告感言
2014/02/28 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
大学生实训报告总结
2014/11/05 职场文书
企业财务总监岗位职责
2015/04/03 职场文书