|
Vue中select下拉框搭配v-model -- 转载
第一种是option的值写在HTML中第二种是option 选项内容写在JS中的，通过v-for来遍历的：第三种是option 选项内容 通过接口去获取 但是接口里没有默认选中项怎么办呢？看代码
在Vue中 使用select下拉框 主要靠的是 v-model 来绑定选项 option 的 value 值。
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();
}
})
转载链接地址： https://blog.csdn.net/weixin_41056945/article/details/92382436
|