vue elementUI select设置初始值

有时候我们需要给element ui选择框设置初始值
需要注意的是el-select绑定的value,一定要类型和options里面的value类型和值全部一致(例如:options里面的value是字符串类型’1’,则el-select绑定的value也必须是字符串类型’1’ ),否则会出现其他效果

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
<script>
data() {
      return {
        options: [{
          value: 1,
          label: '北方'
        }, {
          value: 2,
          label: '南方'
        }, {
          value: 3,
          label: '东方'
        }],
        value: 1 // 注意这里一定要类型和options里面的value一致,否则会显示不一致
      }
</script>

效果如下:
vue elementUI select设置初始值_第1张图片

你可能感兴趣的:(前端,vue.js,elementui,javascript)