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中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
深入解析JavaScript中的立即执行函数
May 21 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
node.js入门学习之url模块
Feb 25 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
JS实现灯泡开关特效
Mar 30 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+APACHE实现网址伪静态
2015/02/22 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
PHP 断点续传实例详解
2017/11/11 PHP
jquery动态添加删除一行数据示例
2014/06/12 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
python中xrange和range的区别
2014/05/13 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
微信跳一跳python代码实现
2018/01/05 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
python3实现高效的端口扫描
2019/08/31 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
腾讯公司的一个sql题
2013/01/22 面试题
写好自荐信的几个要点
2013/12/26 职场文书
运动会开幕式邀请函
2014/01/22 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书