Vue中使用select下拉列表以及修改默认样式

element-ui等前端组件库中，都有人家封装好的组件，可以直接拿来用。不想用的那就只能自己写了。

---

<select class="sel-choose" name="" v-model="selId" @change="choose" :class="{'default-color':selected}">
	<option value="" id="0" style="display: none;" disabled selected>请选择</option>
	<option v-for="item in chooseArr" :id="item.id" v-text="item.name"></option>
</select>

---

export default{
	data(){
		return{
			selId:'',
			chooseArr:[
				{id:1,name:'成员1'},
				{id:2,name:'成员2'}
			],
			selected:true,//默认的字体样式
		}
	}
}

---

比如想要改 请选择 这三个字的样式，

export default{
	mthoeds:{
		choose(){
			if(this.selId){
				this.selected=false;
			}
		}
	}
}

---

css样式，以及修改默认的下拉三角的图标

.sel-choose{
	-webkit-appearance: none; /*去除chrome浏览器的默认下拉图片*/
	-moz-appearance: none; /*去除Firefox浏览器的默认下拉图片*/
	background: url("替换的图片路径") no-repeat right center;
	background-size: 10px  10px;/*图片大小*/
	background-position: 98%;/*图片位置*/
	
}
.default-color {
	font-size: 14px;
	color: #9b9b9b;
}