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 相关文章推荐
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
Canvas实现动态的雪花效果
Feb 13 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 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
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
PHP四大安全策略
2014/03/12 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
python对于requests的封装方法详解
2019/01/03 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
Django values()和value_list()的使用
2020/03/31 Python
python能做哪方面的工作
2020/06/15 Python
python中取绝对值简单方法总结
2020/07/24 Python
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
房地产开盘策划方案
2014/02/10 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
高中军训的心得体会
2014/09/01 职场文书
网络营销实训总结
2015/08/03 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
PyTorch device与cuda.device用法
2022/04/03 Python
优化Mysql查询的示例
2022/04/26 MySQL