选项卡是网站非常常见的效果，大多都是利用了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切换。
本文链接：https://my.lmcjl.com/post/20991.html
展开阅读全文
4 评论