Vue中select下拉框的默认选中项的三种情况

2024-07-13 06:22| 来源: 网络整理| 查看: 265

在Vue中使用select下拉框主要靠的是 v-model 来绑定选项 option 的 value 值。 select下拉框在界面的展示，我们都希望看到框中有一个值而不是空白，比如显示 “请选择” 或者 “全部” 的默认值。先来看效果图 select默认选中项关于select选项的写法有三种情况 ①.写在HTML中，②.写在JS一个数组中，③.通过接口去获取得到，我们直接上代码：第一种是option的值写在HTML中

请选择未处理处理中处理完成 new Vue({ el:'#app', data:{ selected:'' //默认选中项的value值是什么就给绑定的属性什么值这里默认选中项请选择的value值是空我们就给绑定的属性 select 一个空值 }, })

第二种是option 选项内容写在JS中的，通过v-for来遍历的：

{{item.statusVal}} new Vue({ el:'#app', data:{ statusArr:[ { statusId:'0', statusVal:'请选择' }, { statusId:'1', statusVal:'未处理' }, { statusId:'2', statusVal:'处理中' }, { statusId:'3', statusVal:'处理完成' }, ], selected:'' }, created(){ // 在组件创建之后，把默认选中项的value值赋给绑定的属性 //如果没有这句代码，select中初始化会是空白的，默认选中就无法实现 this.selected = this.statusArr[0].statusId; } })

第三种是option 选项内容通过接口去获取但是接口里没有默认选中项怎么办呢？看代码

请选择 {{item.statusVal}} new Vue({ el:'#app', data:{ statusArr:[], //用来接收从接口里获取出来的select下拉框里的值 selected:'' }, getSelectInfo(){ var url = "../monitor_admin_front/device/status"; //接口地址 axios.get(url) .then(response => { if(response.data.retCode == 0){ this.statusArr = response.data.data; //将获取出来的数据赋给定义的数组以便于去循环遍历 } }) }, created(){ this.getSelectInfo(); } })

【本文地址】

公司简介

联系我们