【Vue3】基于Vue3开发tab切换功能

 

 

 

<template>
    <div class="radioGroups">
        <div @click="clickItem(key)"
             :class="{'item-checked':tab_value===key,'item-default':tab_value!==key}"
             v-for="(content,key) in radioGroupContents" :key="key">
            {{content}}
        </div>
    </div>
</template>

<script>
    import { reactive, toRefs } from "vue";

    export default {
        name: "HelloWorld",
        props: {
            msg: String,
        },

        setup() {
            let _data = reactive({
                radioGroupContents: ["春季", "夏季", "秋季", "冬季"],
                // 这里初始化为undefined【不等于任何值】确保首次不选择任何ab不选择！
                tab_value: undefined,
                itemChecked: false,
            });

            function clickItem(key) {
                _data.tab_value = key;
            }


            return {
                ...toRefs(_data),
                clickItem,
            };
        },
    };
</script>


<style scoped lang="scss">

    .radioGroups {
        width: 400px;
        background: red;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;

        .item-default {
            padding: 2px;
            margin: 2px;
            width: 80px;
            height: 20px;
            border: 2px solid #000;
            border-radius: 5px;
        }

        .item-checked {
            @extend .item-default;
            background: #F0F8FF url("../assets/gou.png") no-repeat right;
            background-size: 30px 30px;
        }
    }


</style>