如何在vue项目中实现tab切换

1. 直接上代码（通过下拉框实现给字体改变颜色）

<el-select v-model="value" placeholder="请选择" @change="selectChange">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
    <span id="id1">黑丝</span>
    <span id="id2">白丝</span>
    <span id="id3">青丝</span>
    <span id="id4">没丝</span>

// 下拉框的change事件
    selectChange(val){
        this.value=val;
        if(this.value=='1'){
            document.getElementById('id').style.color='red';
        }else if(this.value=='2'){
            document.getElementById('id').style.color='white';
        }else if(this.value=='3'){
            document.getElementById('id').style.color='blue';
        }else if(this.value=='4'){
            document.getElementById('id').style.color='yellow';
        }
    }

2. 在做项目时注意的点

• 首先要知道成功获取dom

一般像这种简单的dom操作我们是直接可以获取dom的，还有一些项目中要在mounted和created里获取dom,我要说的是这两个生命周期在页面刷新过程中只执行一次

• 如果在项目中出现改不了样式一般都是获取dom的函数执行顺序在条件之前（最容易忽略的点）

• 未成功获取dom