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

使用vue简单实现选项卡切换效果分享

作者:鹏仔先生日期:2020-06-03 11:48:12浏览:4189分类:JavaScript


好久没更新了,敷衍下,嘿嘿!

使用vue简单实现选项卡切换效果分享

使用vue简单实现选项卡切换效果

简单写了点样式,自行复制查看

附代码

<style scoped>
	.menu{
	    display: flex;
	    align-items: center;
	}
	.menu span{
	    color: #444950;
	    font-size: 12px;
	    line-height: 24px;
	    background: #f5f6f7;
	    padding: 0 6px;
	    display: block;
	    cursor: pointer;
	}
	.show{
	    color: #fff !important;
	    background: #1877f2 !important;
	}
</style>
<div class="menu">
    <span @click="btn(1)" :class="{show:tab === 1}">菜单一</span>
    <span @click="btn(2)" :class="{show:tab === 2}">菜单二</span>
    <span @click="btn(3)" :class="{show:tab === 3}">菜单三</span>
</div>
<div class="content">
    <span v-if="tab == 1">内容一</span>
    <span v-if="tab == 2">内容二</span>
    <span v-if="tab == 3">内容三</span>
</div>
<script>
	export default {
	  data () {
	    return {
	      tab: 1
	    }
	  },
	  methods: {
	    btn (key) {
	        this.tab = key
	    }
	  }
	}
</script>


效果比较简单,就不加注释了。

其实也就是点谁传谁的值,点击后将值赋予他,最终对比成立为true显示,否则false隐藏。



手机扫码访问

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

取消回复欢迎 发表评论:

关灯