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 相关文章推荐
基于JQuery的asp.net树实现代码
Nov 30 Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
js只执行1次的函数示例
Jul 20 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
javascript关于“时间”的一次探索
Jul 24 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 正则表达式小结
2015/02/12 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
Python将string转换到float的实例方法
2019/07/29 Python
python将数组n等分的实例
2019/12/02 Python
python如何实现图片压缩
2020/09/11 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
儿科护理实习自我鉴定
2013/09/19 职场文书
外贸采购员求职的自我评价
2013/11/26 职场文书
工作表扬信的范文
2014/01/10 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
老员工辞职信范文
2015/05/12 职场文书
公诉意见书范文
2015/06/05 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python