Vue的收集表单数据
前言
Vue用v-model进行表单数据收集
提示:以下是本篇文章正文内容,下面案例可供参考
一、使用步骤
1.精华全在注释里
代码如下(示例):
<body>
<div id="root">
<form @submit.prevent="demo"><!-- 提交表单阻止页面刷新默认行为 -->
账号:<input type="number" v-model.number="xinxi.admin"/><br/><br/><!-- 注意这里的nubmer要合着用,不然容易字符串乱入 -->
账号:<input type="number" v-model.trim="xinxi.admin"/><br/><br/><!-- trim,把字符串前后的空格都注释掉 -->
密码:<input type="password" v-model="xinxi.password" /><br/><br/>
性别:
男<input type="radio" name="sex" value="man" v-model="xinxi.sex"/>
女<input type="radio" name="sex" value="waman" v-model="xinxi.sex"/><br/><br/>
爱好:
抽烟<input type="checkbox" v-model="xinxi.hobby" value="smoking"/>
喝酒<input type="checkbox" v-model="xinxi.hobby" value="drink"/>
烫头<input type="checkbox" v-model="xinxi.hobby" value="perm"/><br/><br/>
所属校区:
<select name="school" v-model="xinxi.city">
<option value="">请选择校区</option>
<option value="xinxi.bj">北京</option>
<option value="xinxi.sh">上海</option>
<option value="xinxi.sz">深圳</option>
</select><br/><br/>
其他信息:<textarea v-model.lazy="xinxi.more"></textarea><br/><br/><!-- "lazy"失去焦点再更新Vue的数据 -->
<input type="checkbox" v-model="xinxi.agree" value="true"/>阅读并接受<a href="www.baidu.com">《用户协议》</a><br/><br/>
<button type="submit">提交</button>
</form>
</div>
</body>
<script>
const vm=new Vue({
el:'#root',
data:{
xinxi:{
admin:'',//这里定义什么类型,Vue默认接受就是什么类型
password:'',
sex:'',
hobby:[],
city:'',
more:'',
agree:''
}
},
methods:{
demo(){
console.log(JSON.stringify(this.xinxi))//一般转json数据输出是用这种方式
}
}
})
</script>