select设置默认的option-Toy模板网

这篇具有很好参考价值的文章主要介绍了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 : ''"

吸取教训吧
实际效果：
select默认选中option,前端,vue.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-565543.html

到了这里，关于select设置默认的option的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

select设置默认的option

问题：

解决思路：

一.静态的select与option

二.vue动态渲染的option

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2