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视图不更新情况详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Vue.extend构造器的详解

    Vue.extend构造器的详解

    这篇文章主要介绍了Vue.extend构造器的详解的相关资料,需要的朋友可以参考下
    2017-07-07
  • Vue自定义指令实现checkbox全选功能的方法

    Vue自定义指令实现checkbox全选功能的方法

    下面小编就为大家分享一篇Vue自定义指令实现checkbox全选功能的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue 实现tab切换保持数据状态

    vue 实现tab切换保持数据状态

    这篇文章主要介绍了vue 实现tab切换保持数据状态,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue.js实现用户评论、登录、注册、及修改信息功能

    vue.js实现用户评论、登录、注册、及修改信息功能

    这篇文章主要为大家详细介绍了vue.js实现用户评论、登录、注册、及修改信息功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • vue2.0 兄弟组件(平级)通讯的实现代码

    vue2.0 兄弟组件(平级)通讯的实现代码

    这篇文章主要介绍了vue2.0 兄弟组件(平级)通讯的实现代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-01-01
  • vue setInterval 定时器失效的解决方式

    vue setInterval 定时器失效的解决方式

    这篇文章主要介绍了vue setInterval 定时器失效的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue-cli2.x项目优化之引入本地静态库文件的方法

    vue-cli2.x项目优化之引入本地静态库文件的方法

    这篇文章主要介绍了vue-cli2.x项目优化之引入本地静态库文件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • vue 解决遍历对象显示的顺序不对问题

    vue 解决遍历对象显示的顺序不对问题

    今天小编就为大家分享一篇vue 解决遍历对象显示的顺序不对问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue3 源码解读之 time slicing的使用方法

    vue3 源码解读之 time slicing的使用方法

    这篇文章主要介绍了vue3 源码解读之 time slicing的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10

最新评论