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;
}