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,我要说的是这两个生命周期在页面刷新过程中只执行一次