Vue之el-option下拉框绑定问题

<el-option key="6" label="苏州大闸蟹" value="6" />

<el-option key="6" label="苏州大闸蟹" :value="6" />

<template>
  <div>
    <el-button @click="printSelect">调试</el-button>
    //value1 的类型 需要跟:value="item.value" 一样
    <el-select ref="selectValue1" v-model="value1" filterable placeholder="请选择">
      <el-option
        v-for="item in options1"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
      //vaule1 为string 则 value="选项6" 前面可以不用加：即v-bind 数据绑定
      <el-option key="选项6" label="扬州炒饭" value="选项6" />
    </el-select>
    <el-select ref="selectValue2" v-model="value2" no-match-text filterable placeholder="请选择">
      //value2为number 前面需要：
      <el-option key="5" label="扬州炒饭" :value="5" />
      <el-option key="6" label="苏州大闸蟹" :value="6" />
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options1: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value1: '选项1',
      value2: ''
    }
  },
  created() {
    //修改value1 value2 值，查看页面是否匹配到label
    this.getValue()
  },
  methods: {
    printSelect: function() {
        //打印选中到 类型 值 和label值
      console.log(typeof this.value1 + '-' + this.value1 + '-' + this.$refs.selectValue1.selected.label)
      console.log(typeof this.value2 + '-' + this.value2 + '-' + this.$refs.selectValue2.selected.label)
    },
    getValue: function() {
      this.value1 = '选项2'
      this.value2 = 5
    }
  }
}
</script>

<el-option key="5" label="扬州炒饭" value="5" />