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

 更新时间:2017年06月23日 11:50:38   作者:学习笔记666   我要评论
本篇文章主要介绍了VUE元素的隐藏和显示(v-show指令),具有一定的参考价值,感兴趣的小伙伴们可以参考一下

除了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加载完成后的回调函数方法

    vue加载完成后的回调函数方法

    今天小编就为大家分享一篇vue加载完成后的回调函数方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue常用的几个指令附完整案例

    Vue常用的几个指令附完整案例

    越来越多的人在用Vue,刚开始接触vue的话常接触的指令就几个,统一归纳一下。感兴趣的朋友跟随小编一起看看吧
    2018-11-11
  • vue2.X组件学习心得(新手必看篇)

    vue2.X组件学习心得(新手必看篇)

    下面小编就为大家带来一篇vue2.X组件学习心得(新手必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue.js单页面应用实例的简单实现

    vue.js单页面应用实例的简单实现

    本篇文章主要介绍了vue.js单页面应用实例的简单实现,使用单页应用,没有页面切换,就没有白屏阻塞,可以大大提高 H5 的性能,达到接近原生的流畅体验。
    2017-04-04
  • VUE axios上传图片到七牛的实例代码

    VUE axios上传图片到七牛的实例代码

    本篇文章主要介绍了VUE axios上传图片到七牛的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Vue中的vue-resource示例详解

    Vue中的vue-resource示例详解

    Vue与后台Api进行交互通常是利用vue-resource来实现的,本质上vue-resource是通过http来完成AJAX请求相应的。这篇文章主要介绍了Vue中的vue-resource示例详解,需要的朋友可以参考下
    2018-11-11
  • vue移动端实现下拉刷新

    vue移动端实现下拉刷新

    我们通过原理讲解以及代码实例给大家分享了关于VUE实现移动下拉刷新的功能,有的朋友可以跟着学习下。
    2018-04-04
  • vue-cli入门之项目结构分析

    vue-cli入门之项目结构分析

    本篇文章主要介绍了vue-cli入门之项目结构,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • VueCli3构建TS项目的方法步骤

    VueCli3构建TS项目的方法步骤

    这篇文章主要介绍了VueCli3构建TS项目的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • Vue中v-show添加表达式的问题(判断是否显示)

    Vue中v-show添加表达式的问题(判断是否显示)

    这篇文章主要介绍了关于Vue中v-show中添加表达式用于判断是否显示的问题,很多朋友经常会遇到这样的需求,有数据来源和标签类型两行选项,需要实现点击上面的某个数据来源时,标签类型自动切换功能,感兴趣的朋友一起看看吧
    2018-03-03

最新评论