el-select的使用、根據後臺返回的value顯示對應label值

**

1.el-select的使用

**
模板：

<div class="group-brank">
  <label class="col-30"><span style='color:red'>*</span>難度係數</label>
  <template>
    <el-select v-model="difficulty" placeholder="請選擇" style="border-left: 0">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
  </el-select>
</template>

數據：

   data(){
    return {
      options:[{
        value:'1',
        label:'入門'
      },{
        value:'2',
        label:'進階'
      },{
        value:'3',
        label:'高級'
      }],
      difficulty:'',
    }
 }

效果：

2.根據後臺返回的value顯示對應label值

在這裏我使用了filter過濾器：

filters：{
	levelMatch: function(val){
	        switch(val){
	          case 0: return '--'; break;
	          case 1: return '入門'; break;
	          case 2: return '進階'; break;
	          case 3: return '高級'; break;
	        }
	      }
}

 <label>難度：<span>{{cour.difficulty | levelMatch}}</span></label>

因爲我想再次修改，要求修改前可以看到曾經的值。我從處理後臺獲取的數據是這樣子寫的：

this.difficulty = data.difficulty;

結果看到的結果只有數字0、1、2、3，並沒有進行levelMatch；

解決：
因爲下拉的option裏面的value定義成0,1，這是整型，不能定義成’0’,'1’字符串，如果要定義成字符串，後臺需要返回的也是字符串，如果定義成字符串，後臺返回的又是整型，需要使用toString轉一下。
改成這樣就可以了：

this.difficulty = data.difficulty.toString();