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 相关文章推荐
javascript 一些用法小结
Sep 11 Javascript
jQuery 技巧小结
Apr 02 Javascript
做web开发 先学JavaScript
Dec 12 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
vuex实现简易计数器
Oct 27 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 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
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
用PHP读取和编写XML DOM的实现代码
2011/02/03 PHP
php三元运算符知识汇总
2015/07/02 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
Python中bisect的用法
2014/09/23 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
关键字throw与throws的用法差异
2016/11/22 面试题
网络工程师的自我评价
2013/10/02 职场文书
文员的职业生涯规划发展方向
2014/02/08 职场文书
仓库主管岗位职责
2014/03/02 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
JavaScript实现简单拖拽效果
2021/09/15 Javascript
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记