代码如下:
<template>
<Row>
<Col span="5" style="padding-right:10px">
<Select v-model="formAdd.model">
<Option v-for="(item,index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>
</Select>
</Col>
<button @click="sumit">提交</button>
</Row>
</template>
<script>
export default {
data () {
return {
cityList: [],
formAdd:{
model: '',
}
}
},
methods:{
sumit(){
console.log("ttt",this.formAdd.model)
}
},
created(){
// 模拟接口返回的数据
var arr1 = [
{value: '1',label: '2.4K'},
{value: '2',label: '4.8K'},
{value: '3',label: '9.6K'},
{value: '4',label: '19.2K'},
];
this.cityList = arr1;
// value 就等于 id label等于 name 显示在页面上的。
this.formAdd.model = this.cityList[0].value;
}
}
</script>
打印的值就是传的值: this.formAdd.model ;
还有一种取值方法:用@an-change 方法
<Select v-model="formAdd.model" @on-change="data_changes">
<Option v-for="(item,index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>
</Select>
data_changes(data){
console.log("data",data);
},
这是select选中不同的值,打印的结果:
最后为了方便大家的沟通与交流请加QQ群: 625787746
请进QQ群交流:【IT博客技术分享群①】:https://jq.qq.com/?_wv=1027&k=DceI0140