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 相关文章推荐
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
three.js 入门案例详解
Jan 23 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PHP 实用代码收集
2010/01/22 PHP
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
PHP程序员基本要求和必备技能
2014/05/09 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
node实现分片下载的示例代码
2018/10/17 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
layui的select联动实现代码
2019/09/28 Javascript
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
Python调用C语言的实现
2019/07/26 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
档案管理员岗位职责
2013/12/01 职场文书
亲属关系公证书
2014/04/08 职场文书
厂区绿化方案
2014/05/08 职场文书
合同意向书范本
2014/07/30 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
Python max函数中key的用法及原理解析
2021/06/26 Python
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL