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 相关文章推荐
菜单效果
Oct 14 Javascript
一页面多XMLHttpRequest对象
Jan 22 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
js实现照片墙功能实例
Feb 05 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
Vue中的transition封装组件的实现方法
Aug 13 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
PHP远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
jquery键盘事件使用介绍
2011/11/01 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
python求pi的方法
2014/10/08 Python
Python中zfill()方法的使用教程
2015/05/20 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
Python实现Linux监控的方法
2019/05/16 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
python基于Selenium的web自动化框架
2019/07/14 Python
python logging日志模块原理及操作解析
2019/10/12 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
详解Python流程控制语句
2020/10/28 Python
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
采购员的工作职责
2013/12/26 职场文书
教师业务培训方案
2014/05/01 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
村党组织公开承诺书
2015/04/30 职场文书
人民币使用说明书
2019/04/17 职场文书