select设置默认的option

樱花树下的空白

已于 2022-09-17 08:46:24 修改

阅读量1.2w

点赞数 3

分类专栏：前端文章标签： vue.js javascript 前端

于 2022-09-16 21:12:50 首次发布

本文链接：https://blog.csdn.net/qq_45382872/article/details/126897723

版权

在使用Vue.js动态渲染select选项时，遇到默认显示为空的问题。解决方案包括：对于静态的select，可以通过selected属性设定默认选项；而在Vue中，利用v-model绑定数据，将初始值设为与某个option.value相同，即可实现默认选中。在使用Element UI时，同样原理，预设v-model的value等于其中一个option的value。

摘要由CSDN通过智能技术生成

问题：

循环出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"  >