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

2024年04月12日 懒猪 前端开发 前端博客 个人博客 网站制作 鹏仔先生 百变鹏仔 HTML CSS javascript JS 共享博客

选项卡是网站非常常见的效果,大多都是利用了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切换。

本文链接:http://so.lmcjl.com/news/1866/

展开阅读全文
相关内容