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 相关文章推荐
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
BootStrap selectpicker
Jun 20 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
深入理解vue路由的使用
Mar 24 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
JS实现调用本地摄像头功能示例
May 18 Javascript
vue实现五子棋游戏
May 28 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水印技术
2007/02/14 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
一些不错的js函数ajax
2008/08/20 Javascript
页面版文本框智能提示JS代码
2009/11/20 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
python查询sqlite数据表的方法
2015/05/08 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
python3实现字符串操作的实例代码
2019/04/16 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
公司司机岗位职责
2014/02/07 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
美术指导助理求职信
2014/04/20 职场文书
违反交通法规检讨书
2014/09/10 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
停电调休通知
2015/04/16 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
Vue.Draggable实现交换位置
2022/04/07 Vue.js