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

作者：鹏仔先生日期：2020-06-01 17:06:31浏览：1661分类：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切换。