精华内容
下载资源
问答
  • 如何使用vue进行按钮点击后指定区域内容隐藏,再次点击按钮隐藏内容显示。实现思路:首选需要设置一个属性为true(show:true),然后使用v-if把show属性绑定到要显示与内容的标签身上,最后给点击按钮添加点击事件,当...
  • 我要的功能是:有一个按钮,有一个页面,我点击按钮的时候页面可以显示,再点击可以隐藏,一直循环。同时页面显示的时候点击页面区域是不会关闭的,但是点击页面区域之外的地方就会把页面关闭。类似于elementul弹框...

    功能讲解

    网上看到很多帖子都是答非所问,或者给的解决办法只有一半,根本不是我要得功能。

    我要的功能是:有一个按钮,有一个页面,我点击按钮的时候页面可以显示,再点击可以隐藏,一直循环。同时页面显示的时候点击页面区域是不会关闭的,但是点击页面区域之外的地方就会把页面关闭。类似于elementul弹框的那种点击空白处或者点击遮罩层直接关闭弹框的效果

    上代码

    html部分:这里注意一个是按钮,一个是显示页面,我们之所以可以点击之外的区域可以隐藏,是在外面包了一个div,div上写的v-cloak v-clickoutside="outsideClose"这个是重点

        <!-- 点击按钮可以显示隐藏,点击显示的区域不关闭,如果点击的是显示区域之外的地方关闭显示区域 -->
        <div v-cloak v-clickoutside="outsideClose">
          <div @click="show = !show">按钮</div>
          <div v-show="show">显示</div>
        </div>
    

    js部分:这里注意clickoutside这个方法就是通过上面divv-clickoutside="outsideClose"绑定的,所以不要纠结为什么没有获取元素之类的。我看网上帖子好多都是就发了一个方法,然后也没解释,下面评论都在问这个方法不用绑定元素吗之类的。这不是坑新人吗。

    <script>
    export default {
      data() {
        return { 
          //这个是显示隐藏的变量
          show: true
           };
      },
      //这个是主要用来判断是不是区域外的方法
      directives: {
        clickoutside: {
          //初始化,这边判断是否是区域之外
          bind(el, binding, vnode) {
            function documentHandler(e) {
              if (el.contains(e.target)) {
                return false;
              }
              if (binding.expression) {
                binding.value(e);
              }
            }
            function KeyUp(e) {
              if (e.keyCode == 27) {
                if (binding.expression) {
                  binding.value(e);
                }
              }
            }
            el.__vueClickOutSize__ = documentHandler;
            el.__vueKeyup__ = KeyUp;
    
            document.addEventListener("keyup", KeyUp);
            document.addEventListener("click", documentHandler);
          },
          //销毁事件监听
          unbind(el, binding) {
            document.removeEventListener("click", el.__vueClickOutSize__);
            delete el.__vueClickOutSize__;
    
            document.removeEventListener("keyup", el.__vueKeyup__);
            delete el.__vueKeyup__;
          },
        },
      },
      methods: {
        //如果是区域外调用方法隐藏页面
        outsideClose() {
          this.show = false;
        },
      },
    };
    </script>
    
    展开全文
  • vue 点击按钮 显示隐藏有动画效果

    千次阅读 2021-02-09 18:05:13
    css有鼠标移入移出(hover)的动画效果很方便给,但没有鼠标点击的动画效果,vue中有一个transition-group标签能够实现这一功能。 //注意需要加上key <div class="lyric-btn" @click="lyric()">词</div>...

    css有鼠标移入移出(hover)的动画效果很方便给,但没有鼠标点击的动画效果,vue中有一个transition-group标签能够实现这一功能。

    //注意需要加上key
    <div class="lyric-btn" @click="lyric()"></div>
    <transition-group name="lyric">
      <div class="lyric-plate" v-if="isLyric" :key="1">qwe</div>
    </transition-group>
    
    //js
    data() {
      return {
        isLyric: false,
      };
    },
    methods: {
     lyric() {
       this.isLyric = !this.isLyric;
       console.log(this.isLyric);
     },
    }
    
    //css
    <style scoped>
    //需要实现的动画效果就加在css中
    .lyric-enter,
    .lyric-leave-to {
      opacity: 0;
      transform: translateY(10px);
    }
    .lyric-enter-to,
    .lyric-leave {
      opacity: 1;
    
    }
    .lyric-enter-active,
    .lyric-leave-active {
      transition: all 0.5s;
    }
    </style>
    
    展开全文
  • Vue.js 点击按钮显示/隐藏内容 实例

    千次阅读 2019-04-16 20:08:13
    Vue.js 点击按钮显示/隐藏内容 实例 <!DOCTYPE html> <... <head>...meta charset="utf-8">...vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.j...

    Vue.js 点击按钮显示/隐藏内容 实例

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>vue点击切换显示隐藏</title>
    	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    	<div id="example">
    		<button v-text="btnText" @click="showToggle"></button>
    		<p v-show="isShow">原本可以成为Google、Facebook的“爸爸”,或者微软的“儿子”,最后却像“孙子”一样被贱卖,沦为互联网浪潮的“弃子”。</p>
    	</div>
    	<script type="text/javascript">
    	new Vue({
    		el:"#example",
    		data:{
    			btnText:"隐藏",
    			isShow:true
    		},
    		methods:{
    			showToggle:function(){
    				this.isShow = !this.isShow
    				if(this.isShow){
    					this.btnText = "隐藏"
    				}else{
    					this.btnText = "显示"
    				}
    			}
    		}
    	})
    	</script>
    </body>
    </html>
    
    展开全文
  • 主要为大家详细介绍了vue组件实现弹出框点击显示隐藏,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 下面小编就为大家分享一篇Vue.js 点击按钮显示/隐藏内容的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 小编最近遇到这样的需求,当点击一个按钮可以变换里面字的内容,刚开始还真是一头雾水,不知所措。仔细想想屡屡思绪,很...接下来通过本文给大家介绍elementUI Vue 单个按钮显示隐藏的变换功能,需要的朋友可以参考下
  • 再次点击组件一按钮组件一面板隐藏按钮样式也发生改变 切换按钮后,面板发生改变 1、同一组件中实现不同元素切换 <template> <div class="page"> <div class="button"> <span @click...
    • 默认

    在这里插入图片描述

    • 再次点击组件一按钮组件一面板隐藏,按钮样式也发生改变
      在这里插入图片描述

    • 切换按钮后,面板发生改变
      在这里插入图片描述

    1、同一组件中实现不同元素切换

    <template>
      <div class="page">
        <div class="button">
          <span @click="show(1)"
                :class="index===1? 'active':''">组件一</span>
          <span @click="show(2)"
                :class="index===2? 'active':''">组件二</span>
          <span @click="show(3)"
                :class="index===3? 'active':''">组件三</span>
        </div>
        <!-- 面板一 -->
        <div class="one"
             v-show="index===1 && isShow">
        </div>
        <!-- 面板二 -->
        <div class="two"
             v-show="index===2 && isShow">
        </div>
        <!-- 面板三 -->
        <div class="three"
             v-show="index===3 && isShow">
        </div>
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          // 控制切换按钮后按钮改变样式
          index: 1,
          // 控制点击按钮后子组件显示,再次点击隐藏
          isShow: true
        }
      },
      methods: {
        show (value) {
          this.index === value ? this.isShow = !this.isShow : this.isShow = true
          this.index = value
        }
      }
    }
    </script>
    <style scoped lang="scss">
    .page {
      padding: 20px;
      .button {
        span {
          display: inline-block;
          height: 40px;
          line-height: 40px;
          text-align: center;
          width: 100px;
          border: 1px solid #e6e6e6;
          cursor: pointer;
        }
        .active {
          color: #ffffff;
          background: rgb(49, 49, 238);
        }
      }
      .one {
        height: 300px;
        background: red;
      }
      .two {
        height: 300px;
        background: yellow;
      }
      .three {
        height: 300px;
        background: blue;
      }
    }
    </style>
    

    2、利用< keep-alive >和< component >实现不同子组件切换,效果一样

    子组件一:one.vue

    <template>
      <div class="one-com">
        11111
      </div>
    </template>
    <style scoped lang="scss">
    .one-com {
      height: 300px;
      background: red;
    }
    </style>
    

    子组件二:two.vue

    <template>
      <div class="one-com">
        22222
      </div>
    </template>
    <style scoped lang="scss">
    .one-com {
      height: 300px;
      background: yellow;
    }
    </style>
    

    子组件三:three.vue

    <template>
      <div class="one-com">
        333333
      </div>
    </template>
    <style scoped lang="scss">
    .one-com {
      height: 300px;
      background: blue;
    }
    </style>
    

    父组件

    <template>
      <div class="page">
        <div class="button">
          <span @click="show(1)"
                :class="index===1? 'active':''">组件一</span>
          <span @click="show(2)"
                :class="index===2? 'active':''">组件二</span>
          <span @click="show(3)"
                :class="index===3? 'active':''">组件三</span>
        </div>
        <div class="tab_content">
          <keep-alive>
            <component :is="comp"
                       v-show="isShow"></component>
          </keep-alive>
        </div>
      </div>
    </template>
    <script>
    import one from '@/components/dynamic/one.vue'
    import Two from '@/components/dynamic/two.vue'
    import Three from '@/components/dynamic/three.vue'
    export default {
      components: { one, Two, Three },
      data () {
        return {
          // 控制切换按钮后按钮改变样式
          index: 1,
          // 控制子组件显示
          comp: 'one',
          // 控制点击按钮后子组件显示,再次点击隐藏
          isShow: true
        }
      },
      methods: {
        show (value) {
          if (this.index === value) {
            this.index = 0
            this.isShow = !this.isShow
          } else {
            this.index = value
            this.isShow = true
          }
          if (value === 1) this.comp = 'one'
          if (value === 2) this.comp = 'two'
          if (value === 3) this.comp = 'three'
        }
      }
    }
    </script>
    <style scoped lang="scss">
    .page {
      .button {
        span {
          display: inline-block;
          height: 40px;
          line-height: 40px;
          text-align: center;
          width: 100px;
          border: 1px solid #e6e6e6;
          cursor: pointer;
        }
        .active {
          color: #ffffff;
          background: rgb(49, 49, 238);
        }
      }
    }
    </style>
    
    
    展开全文
  • v-model的实现需要在自定义组件中自定义一个inputvalue值,因为vue中的父子组件传递机制问题,在组件中直接修改props注入的key字段时,vue会给出错误。子组件中定义inputvalue字段,用于子组件中input元素的值的双向...
  • vue 点击按钮 显示/隐藏 文本动态显示 &lt;template&gt; &lt;p id="example"&gt; &lt;button v-text="btnText" @click="showToggle"&gt;&lt;/button&...
  • Vue中实现点击按钮显示/隐藏密码框中的文本 咱们通常为了加强用户的使用体验与交互效果会在密码栏一项设置密码可见/隐藏的按钮 例如这样 效果演示: 代码如下 这里开发时是配合着element ui组件库来开发的,...
  • 主要介绍了使用Vue中 v-for循环列表控制按钮隐藏显示功能,需要的朋友可以参考下
  • 解决Vue的button按钮显示隐藏问题

    万次阅读 2019-09-04 13:51:37
    解决Vue的button按钮显示隐藏问题 单个按钮控制显示隐藏 <template> <div> <div v-if="isshow">{{isshow}}</div> <button @click="change()">点击</button> </div...
  • 主要介绍了vue 点击展开显示更多(点击收起部分隐藏),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 平时项目中,经常会做一些下拉菜单等效果,这种效果可能会需要通过一个按钮来控制显示隐藏,并且当点击页面其他空白区域时,也要将其隐藏。 简单写个Demo <!-- 按钮 --> <button @click.stop=ShowHidden...
  • 主要介绍了vue实现密码显示隐藏切换功能,需要的朋友可以参考下
  • 如何使用vue进行按钮点击后指定区域内容隐藏,再次点击按钮隐藏内容显示。实现思路:首选需要设置一个属性为true(show:true),然后使用v-if把show属性绑定到要显示与内容的标签身上,最后给点击按钮添加点击事件,当...
  • Vue点击显示隐藏其它

    千次阅读 2019-02-26 17:57:24
    Vue中 v-show指令的简单demo,代码如下: ...= index 所以其他内容隐藏 ,被点击的则打开 } else { self.isShow = index; //这里是把index赋值给isShow,isShow=index则显示 } } } })
  • 1. 效果图 2. 实现步骤 给最外层的div加个点击事件 @click="screenRule=false" 给点击的元素上面加上:@click....初始化一个值,控制 div 显示隐藏 设置页面最外层(当用户点击页面内所有地方都会触发,把 div...
  • vue 点击显示盒子再次点击隐藏盒子

    千次阅读 2020-04-29 15:17:18
    VUE 点击显示盒子再次点击隐藏盒子 html: <el-button type="text" @click.stop="toggleBox">控制按钮</el-button> <div v-show="open">这是要隐藏的内容</div> method: toggleBox(){ ...
  • <template> <div class="home-container"> <el-menu :collapse="isCollapse"> ... </el-menu> </div> <div> <span @click="isCollapse = !isCollapse">...export def.
  • vue div点击显示隐藏

    千次阅读 2021-02-02 15:23:49
    点击按钮 弹出框 data里面给一个同名变量 为fasle
  • 本文实例为大家分享了Vue点击显示不同图片的具体代码,供大家参考,具体内容如 使用Vue中的以下知识点来显示效果 ①:v-for:循环遍历数据 ②:v-bind:class={ }:绑定样式 ③:v-on:click(简写@click):点击事件 ...
  • 最近小编接到这样的需求:弹出框(或Popover)在 show 后,点击空白处可以将其 hide。针对这个需求,小编整理了三种实现方式,如果大家对vue 点击空白隐藏节点问题感兴趣的朋友跟随小编一起看看吧
  • 如图中的是jquery实现的,那么在vue中如何实现呢?...* 这是一个vue 点击按钮 向上滑动展开的效果组件 例如综合查询接处警的更多条件 * */ const elTransition = '0.3s height ease-in-out, 0.3s padding-top
  • 显示 ' } } } }) // var date = new Date(); // console.log(date); // Tue Sep 26 2017 14:34:27 GMT+0800 (CST) // console.log(new Date().toLocaleString()); // 2017/9/26 下午2:34:27 // var...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,270
精华内容 3,708
关键字:

vue点击按钮显示隐藏

vue 订阅