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 函数使用说明
Apr 07 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
图片翻转效果具体实现代码
Jan 09 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
js仿微博动态栏功能
Feb 22 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
JS数据类型判断的几种常用方法
Jul 07 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具体实现代码
2010/10/12 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
使用PHP Socket写的POP3类
2013/10/30 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
python服务器与android客户端socket通信实例
2014/11/12 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
python实现用户管理系统
2018/01/10 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
Born鞋子官网:Born Shoes
2017/04/06 全球购物
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
高中毕业生生活的自我评价
2013/12/08 职场文书
科级干部考察材料
2014/02/15 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
银行给客户的感谢信
2015/01/23 职场文书
安全教育第一课观后感
2015/06/17 职场文书
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS