上源码
- html 片段
<main id="app">
<form class="mian__form" @submit.prevent="submit">
<ul>
<li>
<div class="form__til">企业名称</div>
<div class="form__input">
<input id="companyName" type="text" placeholder="" required v-model="userData.companyName">
</div>
</li>
<li>
<div class="form__til">企业人数</div>
<div class="form__input">
<input id="peopleNumber" type="number" placeholder="" required v-model="userData.peopleNumber">
</div>
</li>
<li>
<div class="form__til">号码归属地</div>
<div class="form__select select-two">
<select name="tellPlace" id="tellPlace" required onchange="provincechange(this.selectedIndex)" v-model="userData.tellPlace">
<option>请选择省份</option>
</select>
<br/>
<select name="tellCity" id="tellCity" required v-model="userData.tellCity">
<option>请选择城市</option>
</select>
</div>
</li>
<li>
<div class="form__til">号码制式</div>
<div class="form__select">
<select id="tellFormat" v-model="userData.tellFormat" required>
<option value="TD-LTE/TD-SCDMA">TD-LTE/TD-SCDMA</option>
<option value="FDD-LTE/WCDMA">FDD-LTE/WCDMA</option>
<option value="TD-LTE/LTE FDD/CDMA2000">TD-LTE/LTE FDD/CDMA2000</option>
</select>
</div>
</li>
<li>
<div class="form__til">开通功能</div>
<div class="from__checkbox">
<div class="checkbox__inner">
<input id="functionAll" type="checkbox" value="企业总机" v-model="userData.openFun">
<label for="functionAll">企业总机</label>
</div>
<div class="checkbox__inner">
<input id="functionTell" type="checkbox" value="电话会议" v-model="userData.openFun">
<label for="functionTell">电话会议</label>
</div>
<div class="checkbox__inner">
<input id="functionCompany" type="checkbox" value="集团V网" v-model="userData.openFun">
<label for="functionCompany">集团V网</label>
</div>
</div>
</li>
<li>
<div class="form__til">联系人</div>
<div class="form__input">
<input id="Contacts" type="text" placeholder="" required v-model="userData.Contacts">
</div>
</li>
<li>
<div class="form__til">联系电话</div>
<div class="form__input">
<input id="contactTell" type="number" placeholder="" maxlength="11" required v-model="userData.contactTell">
</div>
</li>
<li>
<button class="submit-btn" id="submitBtn" type="submit">提交</button>
</li>
</ul>
</form>
</main>
- js 片段
var vm = new Vue({
el:'#app',
data:{
userData:{
companyName:'',
peopleNumber:'',
tellPlace:'',
tellCity:'',
tellFormat:'',
openFun:[],
Contacts:'',
contactTell:''
},
checkedNames:[]
},
methods:{
submit:function(){
var me = this;
var data = JSON.stringify(me.userData);
console.log(data);
}
}
});
- 浏览器器控制台在数据提交时的输出
image.png
- 总结
需要注意的一点是在复选框
checkbox这种的组合时，需要在js中将userData中相应的属性openFun的默认值写成数组，因为这个是数组类型的数据，还有就是在html中写的时候需要注意每个checkbox必须得有value属性，且有相应值
