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/