专注前端行业精选
Q站 - L站 -
当前位置:网站首页 > 最近更新 > 前端开发 > JavaScript > 正文

在VUE中使用v-show简单实现一个选项卡切换效果

作者:鹏仔先生日期:2020-06-01 17:06:31浏览:797分类:JavaScript

选项卡是网站非常常见的效果,大多都是利用了css属性中的display,下面鹏仔给大家带来vue中使用v-show来简单实现选项卡效果。

在开始之前,大家得先在页面中引入VUE

<style>
    #app{
        width: 400px;
        height: 250px;
        position: relative;
    }
    .box01{
        width:100%;
        height: 100%;
        background: palevioletred;
        position: absolute;
    }
    .box02{
        width:100%;
        height: 100%;
        background: #6b46e5;
        position: absolute;
    }
</style>
<div id="app">
	<div class="hea">
	    <a href="javascript:;" @click="tab(1)">box1</a>
	    <a href="javascript:;" @click="tab(2)">box2</a>
	</div>
	<div class="box011">
	    <div class="box01" v-show="falg == 1">
	        <p>第1个box</p>
	    </div>
	    <div class="box02" v-show="falg == 2">
	         <p>第2个box</p>
	    </div>
	</div>
</div>
<script>
    (function () {
        new Vue({
            el:"#app",
            data:{
              falg:1
            },
            methods:{
                tab(n){
                    this.falg = n
                }
            }
        })
    })()
</script>

v-show 是根据表达式之真假值,切换元素的 display CSS 属性。

当条件变化时该指令触发过渡效果。
v-show不管初始条件是什么,元素总是会被渲染,只是简单地基于 CSS属性 进行display切换。

手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯