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 15 Javascript
javascript 动态创建表格
Jan 08 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 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 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
js异或加解密效果代码
2008/06/25 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
Python实现随机选择元素功能
2017/09/14 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
我的梦中国梦演讲稿
2014/04/23 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
运动会加油稿100字
2014/09/19 职场文书
收入证明怎么写
2015/06/12 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
vue 自定义组件添加原生事件
2022/04/21 Vue.js