<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue中获取选择下拉框的值和label标签</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-form >
<el-form-item label="状态">
<el-select v-model="status">
<el-option v-for="item in statuses" :key="item.value" :value="item" :label="item.name"></el-option>
</el-select>
</el-form-item>
</el-form>
{{this.status}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el:'#app',
data(){
return{
statuses:[
],
status:{
},
}
},
created(){
this.getstatusData();
},
methods:{
/*模拟接口得到状态中数据并把数据遍历到option中*/
getstatusData(){
/*这边res应该是你调取后台接口返回给你的数据，但是我这边是直接模拟了一下场景*/
let res =[
{name:"草稿",value:0},
{name:"审核",value:1},
{name:"拒绝",value:2},
];
res.forEach(item=>{
this.statuses.push({
name:item.name,
value:item.value
})
})
}
}
})
</script>
</body>
</html>
<!--备注：
1、statuses中的value中只能设置value属性
2、key值也是只能设置成item.value不然会报错
-->
3688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
