tab样式改变案例

最新推荐文章于 2024-06-21 15:14:18 发布

Record growth...

最新推荐文章于 2024-06-21 15:14:18 发布

阅读量66

点赞数

分类专栏： Vue 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_44239550/article/details/128645898

版权

Vue 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

效果：
点击不同的按钮，该按钮进行高亮，并且下方的数字对应改变
在这里插入图片描述

在这里插入图片描述

实现代码：

<template>
    <div>
        <h3>样式改变</h3> 
        <button v-for="(item,index) in btn" 
            :key="item" 
            style="margin-right:10px"
            @click="getIndex(index)"
            :class="{btn:index == num}"
            >
            {{item}}
        </button>

        <div class="hello">
            <div v-for="(ele,index) in content" :key="ele" :class="{ show :index == num}" class="hid">
                {{ ele }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            btn:["按钮1", "按钮2", "按钮3"],
            content: ["111", "222", "333",],
            num:0,
            flag : false
        }
    },
    methods:{
        getIndex(index){
            this.num = index;

        }
    }
}
</script>

<style>
.hello{
    width: 200px;
    height: 100px;
    background-color: pink;
    margin: 0 auto;
}
.btn{
    background-color: aqua;
}
.hid{
    display: none;
}
.show{
    display: block;
}
</style>