Vue中lect下拉框的默认选中项的三种情况
关于lect选项的写法有三种情况①.写在HTML中，②.写在JS⼀个数组中，③.通过接⼝去获取得到，我们直接上代码：
第⼀种是option的值写在HTML中
<div id="app">
<lect name="status" id="status" v-model="lected">我的童年我做主
<option value="">请选择</option>
<option value="1">未处理</option>
<option value="2">处理中</option>
<option value="3">处理完成</option>
</lect>
</div>
<script>
new Vue({
el:'#app',
data:{
lected:''
//默认选中项的value值是什么就给绑定的属性什么值这⾥默认选中项请选择的value值是空我们就给绑定的属性 lect ⼀个空值 },
})
</script>
第⼆种是option 选项内容写在JS中的，通过v-for来遍历的：
<body>
<div id="app">
<lect name="status" id="status" v-model="lected">
<option :value="item.statusId" v-for="(item,index) in statusArr">{{item.statusVal}}</option>
</lect>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
statusArr:[
{
statusId:'0',
statusVal:'请选择'
},
{
statusId:'1',
statusVal:'未处理'
},
{
statusId:'2',
statusVal:'处理中'
},
背水一战
螃蟹怎么清洗
{
statusId:'3',
statusVal:'处理完成'
大米怎么做好吃},
],
lected:''
},
created(){
// 在组件创建之后，把默认选中项的value值赋给绑定的属性
江永//如果没有这句代码，lect中初始化会是空⽩的，默认选中就⽆法实现
this.lected =this.statusArr[0].statusId;
}
})
</script>
第三种是option 选项内容通过接⼝去获取但是接⼝⾥没有默认选中项怎么办呢？看代码
<body>
<div id="app">
<lect name="status" id="status" v-model="lected">
<!-- 由于从接⼝获取的lect的下拉值没有‘请选择’，所以我们要⾃⼰写⼀个 -->
<option value="">请选择</option>
<option :value="item.statusId" v-for="(item,index) in statusArr">{{item.statusVal}}</option>
</lect>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
statusArr:[], //⽤来接收从接⼝⾥获取出来的lect下拉框⾥的值
lected:''
},
getSelectInfo(){
太阳晒伤var url ="../monitor_admin_front/device/status"; //接⼝地址
<(url)
.then(respon => {
if(Code ==0){
this.statusArr = respon.data.data; //将获取出来的数据赋给定义的数组以便于去循环遍历 }应用文的作用
})
},
created(){
}
})
</script>
销售岗位要求
