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的拖动布局插件
Nov 25 Javascript
jQuery(非HTML5)可编辑表格实现代码
Dec 11 Javascript
单元选择合并变色示例代码
May 26 Javascript
JSON格式化输出
Nov 10 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 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作的文本留言本的例子(四)
2006/10/09 PHP
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
PHP加密解密函数详解
2015/10/28 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
PHP session 会话处理函数
2016/06/06 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
javascript中clone对象详解
2014/12/03 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
Python实现自动发送邮件功能
2021/03/02 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
pytorch打印网络结构的实例
2019/08/19 Python
python 实现多维数组(array)排序
2020/02/28 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
公司业务员岗位职责
2014/03/18 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
2015年班级工作总结范文
2015/04/03 职场文书