VUE的表单数据

最新推荐文章于 2025-03-13 11:57:42 发布

脚踏实地，坚持不懈!

最新推荐文章于 2025-03-13 11:57:42 发布

阅读量667

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_43228946/article/details/126850605

版权

VUE的表单数据：
（1）如果在input标签里，type =“text”,那么v-model收集的是value值，用户输入的就是value值。
（2）如果在input标签里，type =“radio”,那么v-model收集的是value值，且要给标签配置value值。
（3）如果在input标签里，type =“checkbox”,那么这里有两种情况需要注意：
第一种、input没有配置value属性的话，那么收集的布尔值checked
第二种、input配置了value属性，如果v-model的初始值不是数组类型的，那么收集的值也是布尔值checked，只有在v-model的初始值是数组类型的，那么最后收集的是由value的值组成的数组。
v-model也有三个修饰符需要注意下：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
代码案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
                  <meta charset="UTF-8">
                  <meta http-equiv="X-UA-Compatible" content="IE=edge">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <title>VUE的表单数据</title>
                  <script type="text/javascript" src="../vue_js/vue.js"></script>
                  <style>
                                    #root{
                                                      background-color: aqua;
                                                      margin: 220px 800px;
                                    }
                                    h2{
                                            text-align: center;          
                                    }
                  </style>
</head>

<body>
                  <div id="root">
                                    <h2>某某系统的注册页面</h1>
                                    <form @submit.prevent="demo">
                                                      账号：<input type="text" v-model.trim="userInfo.account">
                                                      <br /><br />
                                                      密码：<input type="password" v-model="userInfo.password">
                                                      <br /><br />
                                                      年龄：<input type="number" v-model.number="userInfo.age">
                                                      <br /><br />
                                                      性别：
                                                      男<input type="radio" name="sex" v-model="userInfo.sex"
                                                                        value="male">
                                                      女<input type="radio" name="sex" v-model="userInfo.sex"
                                                                        value="female"> <br /><br />
                                                      爱好：
                                                      学习<input type="checkbox" v-model="userInfo.hobby" value="study">
                                                      游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
                                                      运动<input type="checkbox" v-model="userInfo.hobby" value="motion">
                                                      吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
                                                      <br /><br />
                                                      所属校区
                                                      <select v-model="userInfo.city">
                                                                        <option value="">请选择校区</option>
                                                                        <option value="beijing">北京</option>
                                                                        <option value="shanghai">上海</option>
                                                                        <option value="shenzhen">深圳</option>
                                                                        <option value="wuhan">武汉</option>
                                                                        <option value="chengdu">成都</option>
                                                                        <option value="hangzhou">杭州</option>
                                                      </select>
                                                      <br /><br />
                                                      其他信息：
                                                      <textarea v-model.lazy="userInfo.other"></textarea> <br /><br />
                                                      <input type="checkbox" v-model="userInfo.agree">阅读并接受<a
                                                                        href="https://www.youkuaiyun.com/">《用户协议》</a>
                                                      <button>注册</button>
                                    </form>
                  </div>
                  <script>
                                    Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。
                                    const vm = new Vue({
                                                      el: '#root',
                                                      data: {
                                                                        userInfo: {
                                                                                          account: '',
                                                                                          password: '',
                                                                                          age: '',
                                                                                          sex: 'male',
                                                                                          hobby: [],
                                                                                          city: 'beijing',
                                                                                          other: '',
                                                                                          agree: ''
                                                                        }
                                                      },
                                                      methods: {
                                                                        demo() {
                                                                                          console.log(JSON.stringify(this.userInfo))
                                                                                          alert("注册成功了！")
                                                                        }
                                                      }
                                    })

                  </script>
</body>

</html>

在这里插入图片描述