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();