vue收集表单学习记录

最新推荐文章于 2024-06-27 19:54:40 发布

Gjanuary

最新推荐文章于 2024-06-27 19:54:40 发布

阅读量448

点赞数

分类专栏：前端学习记录文章标签： vue.js

本文链接：https://blog.csdn.net/Gjanuary/article/details/121681678

版权

前端学习记录专栏收录该内容

75 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>收集表单数据</title>
	<script type="text/javascript" src="./vuebasic/vue.js"></script>
    <style>
        #root{
            width:242px;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <!--v-model配合着不同类型的表单的使用方式-->
    <div id="root">
       <form @submit.prevent="demo">
           <label for="username" >账号:</label>
           <input id="username"   type="text" placeholder="请输入账号" v-model="user.userName"/><br/>

           <label for="pwd">密码:</label>
           <input id="pwd" type="password" placeholder="请输入密码" v-model="user.userPwd"/><br/>
           
           <label for="money">存款:</label>
           <!--当需要的是数字的类型的话，那么需要使用v-model.number-->
           <input id="money" type="number" placeholder="请输入存款" v-model.number="user.money"/><br/>
           性别：<input type="radio" name='gender' v-model="user.gender" value="man"/>男 
                 <input type="radio" name='gender' v-model="user.gender" value="woman"/>女<br/>
           爱好：<input type="checkbox"  v-model="user.hobby" value="game"/>游戏 
                 <input type="checkbox"  v-model="user.hobby" value="run"/>跑步
                 <input type="checkbox"  v-model="user.hobby" value="read"/>读书<br/>
            所属地区：
            <select v-model="user.province">
                <option value="">请选择地区</option>
                <option value="beijing"   >北京</option>
                <option value="shanghai"  >上海</option>
                <option value="chongqing" >重庆</option>
                <option value="guangzhou" >广州</option>
            </select>
            <br/><br/>
            意见：
            <textarea v-model="user.mess"></textarea>
            <br/><br/>
            <button>确定</button>
       </form>
       
       
    </div>

	<script>
		Vue.config.productTip = false// 阻止启动时候提示生产错误
        new Vue({
            el:'#root',
            data:{
                user:{
                    userName:'',
                    userPwd:'',
                    gender:'man',
                    // 多选要写数组切记
                    hobby:[],
                    province:'chongqing',
                    mess:'',
                    money:''// 存储字段
                }
            },
            methods:{
                demo(){
                   console.log(JSON.stringify(this.user))
                }
            }

        })

	</script>
</body>
</html>

Gjanuary

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue收集表单学习记录

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>收集表单数据</title> <script type="text/javascript" src="./vuebasic/vue.js"></script> <style> #root{ width:242px; .
复制链接

扫一扫