select设置默认的option

问题：

循环出select内的数据以后，发现原本默认显示第一条的select框变成了空白，想要设置一个默认的option，我今天遇到了这个问题，然后总结了两条。

解决思路：

html代码如下，通过v-model可以获取到选中的值，如果option中存在value属性，优先获取value值即option.name，如果不存在，则获取option的文本内容。

一.静态的select与option

也就是说不用vue动态渲染
这种情况下就很简单：一般默认是第一个是默认选项，如果想别的默认，加个selected就好

<  select   id  =   "sel"  >
	<  option   value  =  "1"  >1</  option  >
	<  option   value  =  "2"   selected  =  "selected"  >2</  option  >
	<  option   value  =  "3"  >3</  option  >
</  select  >

二.vue动态渲染的option

这里我以使用elementUI搭建的为例：
默认值的话是需要在select标签里定好，用v-model绑定，默认值的话我们可以在渲染的数组外定，只要和option的value保持一致就好了。

<template>
  <div>
    <el-select v-model="value" placeholder="请选择" @change="handleSelect">
      <el-option
        v-for="item in options"
        :key="item.id"
        :value="item.name"
        :label="item.name"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
    
    
  name: 'ceShi',
  data () {
    
    
    return {
    
    
      options: [
        {
    
    
          id: 1,
          name: '老王'
        },
        {
    
    
          id: 2,
          name: '李四'
        }
      ],
      value: ''
    }
  },
  created () {
    
    
    this.value = this.options[0].name
  },
  methods: {
    
    
    handleSelect () {
    
    
      console.log(this.value)
    }
  }
}
</script>

<style>
</style>

隐藏属性就是
当我们把v-model中的value,也就是data里的value的值赋值为循环的option中的value后，那这个option就会被默认选中

我本来的想法是以为给option的selected属性搞个三元表达式，结果不行：

:selected="item.id == 1 ? selected : ''"

吸取教训吧
实际效果：