【vue】tabs标签页应用

一、参数解读：

• v-model：绑定值，选项中卡的name
• label：选项卡标题
• name：与选项卡绑定值 value 对应的标识符，表示选项卡别名
• tab_name（data对应的v-model参数）：默认选中的选项卡

二、tabs标签用法：

• dom层：

 <el-tabs v-model="绑定值">
    <el-tab-pane label="选项卡1名称" name="first">
    <el-tab-pane label="选项卡2名称" name="second">
    <el-tab-pane label="选项卡3名称" name="third">
</el-tabs>

• bom层：

 export default {
        data(){
            return{
                tab_name:'默认选项，取name的值'
            }
        },
}

三、源代码

<template>
    <div style="height: 100%">
        <el-tabs v-model="tab_name">
            <el-tab-pane label="项目设置" name="first">
            <el-tab-pane label="接口用例" name="second">
        </el-tabs>
    </div>
</template>

<script>
    export default {
        name: "Project_detail",
        data(){
            return{
                tab_name:'first'
            }
        },
    }
</script>

四、前端样式