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 相关文章推荐
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
jQuery 获取对象 定位子对象
May 31 Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
JavaScript 和 Java 的区别浅析
Jul 31 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
angular十大常见问题
Mar 07 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 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
一个MYSQL操作类
2006/11/16 PHP
php zend 相对路径问题
2009/01/12 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
什么是数组名
2012/05/10 面试题
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
什么叫做SQL注入,如何防止
2016/10/04 面试题
狼和鹿教学反思
2014/02/05 职场文书
收费员岗位职责
2015/02/14 职场文书
运输公司工作总结
2015/08/11 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL