VUE元素的隐藏和显示(v-show指令)


Posted in Javascript onJune 23, 2017

除了click单击事件,还有mouseover,mouseover等鼠标事件。

dbclick双击事件。

v-on:click/mouseover/mouseover/mousedown/dbclick/...

v-show指令

v-show="true/false" //控制元素显示/隐藏

示例代码:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <script src="http://unpkg.com/vue/dist/vue.js"></script>

  <script type="text/javascript">
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data:{
          isShow:false,
        },
        methods:{
          toggle:function(){
            this.isShow = !this.isShow;
          }
        }
      });
    }
  </script>
</head>
<body>
  <div id="box">
    <input type="button" value="toggle" v-on:click="toggle()"> <br />
    <div v-show="isShow" style="width: 100px;height: 100px;background: red"></div>
  </div>
</body>
</html>

VUE元素的隐藏和显示(v-show指令) 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
javascript if条件判断方法小结
May 17 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
vue数据双向绑定的注意点
Jun 23 #Javascript
Vue.js常用指令的使用小结
Jun 23 #Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 #Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 #Javascript
JavaScript订单操作小程序完整版
Jun 23 #Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 #Javascript
JavaScript实现简单的树形菜单效果
Jun 23 #Javascript
You might like
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
2016/06/12 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
Python 用户登录验证的小例子
2013/03/06 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
解决python 上传图片限制格式问题
2019/10/30 Python
wxPython多个窗口的基本结构
2019/11/19 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
Python class的继承方法代码实例
2020/02/14 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
python3 kubernetes api的使用示例
2021/01/12 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
国旗下演讲稿
2014/05/08 职场文书
青春无悔演讲稿
2014/05/08 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
民间借贷借条如何写
2015/05/26 职场文书
初中班干部工作总结
2015/08/10 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技