探究Vue表单输入绑定v-model

探究Vue表单输入绑定v-model

Vue 官网： https://cn.vuejs.org/v2/guide/forms.html
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 https://www.bilibili.com/

---

表单输入绑定

1. 基础语法 值绑定 v-model

说到表单，肯定会想到的就是form。form表单是一个包含表单元素的区域，允许用户在表单中
(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。
form常用属性
name：规定表单的名称。
action：规定当提交表单时，向何处发送表单数据。默认为当前页面
method：规定如何发送表单数据（即提交方式，常用get或post），默认get

1.1. 文本

  	<label for="account">账号：</label>
     <input type="text" v-model="account" id="account"> <br/><br/>
     <label for="password">密码：</label>
     <input type="password" v-model="password" id="password"><br/><br/>

1.2. 单选按钮

	<label>性别：</label>
	男：<input type="radio" v-model="sex"  value="male">
	女：<input type="radio" v-model="sex"  value="female"><br/><br/>

1.3. 复选框

		<label>爱好：</label>
        <input type="checkbox" v-model="hobby"  value="somking"> 抽烟
        <input type="checkbox" v-model="hobby"  value="drink"> 喝酒
        <input type="checkbox" v-model="hobby"  value="soupHead"> 汤头
        <br/><br/>

1.4. 选择框

		<label>所属校区：</label>
        <select v-model="schoolArea">
            <option value="">请选择校区</option>
            <option value="shanghai">上海</option>
            <option value="tianjin">天津</option>
            <option value="baijin">北京</option>
            <option value="xian">西安</option>
        </select>            
        <br/><br/>

1.5.多行文本

            <label>其它信息：</label>            
            <textarea v-model.lazy="userinfo.otherInfo">
            </textarea><br/><br/>

1.6. 提交按钮

         <button type="submit" @click.prevent="saveInfo">提交</button>
         <!--
             注意：
             当我点击提交，当配置url时，页面会发生跳转，跳转的url是在form标签中action属性定义的url！
             当我点击提交，当没有配置url时，可以明确的看出表单进行了刷新页面！
             如果不需要跳转，或是不需要页面刷新时，可以阻止其默认行为即可,使用.prevent
         -->
         <br/>

2. v-model 修饰符

2.1. .layz 在 change 事件_之后_进行同步 ,也可以理解为：失去焦点再收集数据；

            <label>其它信息：</label>            
            <textarea v-model.lazy="otherInfo">
            </textarea><br/><br/>

2.2. .number 将用户的输入值转为数值类型

 			<label for="age">年龄</label>
            <input type="number" v-model.number="age" id="age"><br/><br/>

2.3. .trim 自动过滤用户输入的首尾空白字符

			<label for="account">账号：</label>
            <input type="text" v-model.trim="userinfo.account" id="account"> <br/><br/>

3. 细节

3.1、点文字账号，密码，光标定位到相应input框中

• 给label标签，添加for属性，其值与input标签的id属性的值相同，以在label和input之间创建关联，使input可以获取鼠标焦点

3.2、button 按钮

• button 按钮的默认类型为**submit **，当类型为 submit 时，就是有默认的提交行为(刷新当前页面)，

4. 总结

• 收集表彰数据：
  • 若：<input type="text"/> 则 v-model 收集的是value 值 ，用户输入的就是value 值。
  • 若：<input type="radio"/> 则 v-model 收集的是value 值 ，且要给标签配置value 值。
  • 若：<input type="checbox"/>
    1. 没有配置input 的 value属性，那么收集的就是checked(勾选or 未勾选，是布尔值)
    2. 配置input 的value 属性
       1. v-model 的初始值 是非数组，那么收集的就是checked(勾选or 未勾选，是布尔值)
       2. v-model 的初始值 是数组，那么收集的就是value 组成的数组
    3. 备注：v-model的三个修饰符：
       1. lazy: 失去焦点再收集数据；
       2. number:输入字符串转为有效的数字
       3. trim:输入首尾空格过滤

5. 案例

<div id="root">
        <h1>你好,{{name}}</h1>
        <hr/>
        <!-- <form @submit.prevent="saveInfo"> -->
        <form action="http://www.baidu.com">
            <label for="account">账号：</label>
            <input type="text" v-model.trim="userinfo.account" id="account"> <br/><br/>
            <label for="password">密码：</label>
            <input type="password" v-model="userinfo.password" id="password"><br/><br/>
            <label>性别：</label>
            男：<input type="radio" v-model="userinfo.sex"  value="male">
            女：<input type="radio" v-model="userinfo.sex"  value="female"><br/><br/>
             <label for="age">年龄</label>
            <input type="number" v-model.number="userinfo.age" id="age"><br/><br/>
            <label>爱好：</label>
            <input type="checkbox" v-model="userinfo.hobby"  value="somking"> 抽烟
            <input type="checkbox" v-model="userinfo.hobby"  value="drink"> 喝酒
            <input type="checkbox" v-model="userinfo.hobby"  value="soupHead"> 汤头
            <br/><br/>
            <label>所属校区：</label>
            <select v-model="userinfo.schoolArea">
                <option value="">请选择校区</option>
                <option value="shanghai">上海</option>
                <option value="tianjin">天津</option>
                <option value="baijin">北京</option>
                <option value="xian">西安</option>
            </select>            <br/><br/>
            <label>其它信息：</label>            
            <textarea v-model.lazy="userinfo.otherInfo">
            </textarea><br/><br/>
            <input type="checkbox" v-model="userinfo.agree" >
            阅读并接受<a href="http://www.baidu.com" >《用户协议》</a> 
            <button type="submit" @click.prevent="saveInfo">提交</button>
            <br/>
        </form>
    </div>
  <script type="text/javascript">
     Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
     new Vue({
        el: "#root",
        data: {
            name: "安锐捷",
            userinfo: {
                account: '',
                password:'',
                sex:'',
                hobby: [],
                schoolArea:'',
                otherInfo:'',
                agree:''    
            },
        },
        methods: {
            saveInfo(){
                //打印输入方式1： 不建议使用这种_data 的方式
                //console.log("test log :",JSON.stringify(this._data));
                //方式2、 定义实体打印显示
                console.log("test log ",JSON.stringify(this.userinfo));
            }
        },
      })
  </script>

泰山不让土壤，故能成其大；河海不择细流，故能就其深。——西汉·司马迁《史记·李斯列传》

下面这副图片，你看到了什么，欢迎评论区留言
g