编程 Javascript

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指令)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

VUE元素的隐藏和显示（v-show指令)

- Author -

学习笔记666

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery 表单取值常用代码

Dec 22 Javascript

教你如何终止JQUERY的$.AJAX请求

Feb 23 Javascript

JavaScript中Object.prototype.toString方法的原理

Feb 24 Javascript

Javascript使用function创建类的两种方法(推荐)

Nov 19 Javascript

JS中微信小程序自定义底部弹出框

Dec 22 Javascript

js中变量的连续赋值(实例讲解)

Jul 08 Javascript

vue如何集成raphael.js中国地图的方法示例

Aug 15 Javascript

vue 过滤器filter实例详解

Mar 14 Javascript

Node.js实现简单的爬取的示例代码

Jun 25 Javascript

JavaScript享元模式原理与用法实例详解

Mar 09 Javascript

element跨分页操作选择详解

Jun 29 Javascript

JavaScript 几种循环方式以及模块化的总结

Sep 03 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入门速成(2)

2006/10/09 PHP

yii框架表单模型使用及以数组形式提交表单数据示例

2014/04/30 PHP

服务器上配置PHP运行环境教程

2015/02/12 PHP

php统计数组元素个数的方法

2015/07/02 PHP

php设计模式之适配器模式实例分析【星际争霸游戏案例】

2020/04/07 PHP

用JavaScript脚本实现Web页面信息交互

2006/12/21 Javascript

js直接编辑当前cookie的脚本

2008/09/14 Javascript

javascript 面向对象编程基础：封装

2009/08/21 Javascript

模仿百度三维地图的js数据分享

2011/05/12 Javascript

JavaScript中的匀速运动和变速(缓冲)运动详细介绍

2012/11/11 Javascript

jQuery html()方法使用不了无法显示内容的问题

2014/08/06 Javascript

谈一谈jQuery核心架构设计

2016/03/28 Javascript

Bootstrap每天必学之折叠（Collapse）插件

2016/04/25 Javascript

利用JS对iframe父子（内外）页面进行操作的方法教程

2017/06/15 Javascript

vue服务端渲染的实例代码

2017/08/28 Javascript

NVM安装nodejs的方法实用步骤

2019/01/16 NodeJs

微信小程序实现带放大效果的轮播图

2020/05/26 Javascript

解决vue+router路由跳转不起作用的一项原因

2020/07/19 Javascript

python版opencv摄像头人脸实时检测方法

2018/08/03 Python

Python 处理文件的几种方式

2019/08/23 Python

python爬虫之爬取百度音乐的实现方法

2019/08/24 Python

python模块和包的应用BASE_PATH使用解析

2019/12/14 Python

Python使用uuid库生成唯一标识ID

2020/02/12 Python

Python阶乘求和的代码详解

2020/02/14 Python

TFRecord文件查看包含的所有Features代码

2020/02/17 Python

HTML5之语义标签介绍

2016/07/07 HTML / CSS

Kendra Scott官网：美国领先的时尚配饰品牌

2020/10/22 全球购物

鲜果饮品店创业计划书

2014/01/21 职场文书

教师远程培训感言

2014/03/06 职场文书

大班亲子运动会方案

2014/06/10 职场文书

领导干部查摆“四风”问题自我剖析材料思想汇报

2014/10/05 职场文书

南极大冒险观后感

2015/06/05 职场文书

赢在执行观后感

2015/06/16 职场文书

银行柜员优质服务心得体会

2016/01/22 职场文书

python基于tkinter制作下班倒计时工具

2021/04/28 Python

Go语言编译原理之源码调试

2022/08/05 Golang