Vue中v-model收集表单数据及修饰符的使用备忘

秒速五厘米 2024-03-30 10:40 62阅读 0赞

#### 文章目录 ####

*  Vue中v-model收集表单数据及修饰符的使用备忘
 *   *  1. 收集inputk框,type='text'的值
     *  2. 收集inputk框,type='radio'的值
     *  3. 收集inputk框,type='checkbox'的值
     *  4. v-model的三个修饰符:
     *   *  4-1 v-model.lazy 失去焦点时才收集数据(常用于多行文本框)
         *  4-2 v-model.number 输入字符串转为有效的数字 (常与input框type="number"搭配使用)
         *  4-3 v-model.trim 过滤输入的首尾空格(常用于账号名等)
         *  4-4 一个v-model完整可参考的表单例子：

## Vue中v-model收集表单数据及修饰符的使用备忘 ##

### 1. 收集inputk框,type='text’的值 ###

<label for="username">账号:</label>
     <input type="text" id="username" v-model.trim="account" />

### 2. 收集inputk框,type='radio’的值 ###

性别:<br />
     <label for="sex0">男</label>
      <input type="radio" name="sex" id="sex0" v-model="sex" value="male" />
     <label for="sex1">女</label>
      <input type="radio" name="sex" id="sex1" v-model="sex" value="female" />

### 3. 收集inputk框,type='checkbox’的值 ###

爱好:<br/>
    <input type="checkbox" name="hobby" v-model="sex" value="跑步" />
    <input type="checkbox" name="hobby" v-model="sex" value="游戏" />
    <input type="checkbox" name="hobby" v-model="sex" value="游泳" />

### 4. v-model的三个修饰符: ###

#### 4-1 v-model.lazy 失去焦点时才收集数据(常用于多行文本框) ####

其他信息:
      		<textarea
              name=""
              id=""
              cols="16"
              rows="2"
              v-model.lazy="otherInfo">
            </textarea><br />

#### 4-2 v-model.number 输入字符串转为有效的数字 (常与input框type="number"搭配使用) ####

#### 4-3 v-model.trim 过滤输入的首尾空格(常用于账号名等) ####

#### 4-4 一个v-model完整可参考的表单例子： ####

<div id="app">
          
          <form @submit.prevent="getForm">
            <label for="username">账号:</label>
            <input type="text" id="username" v-model.trim="account" /><br />
            <label for="password">密码:</label>
            <input type="password" id="password" v-model="password" /><br />
            
            <label for="age">年龄:</label>
            <input type="number" id="age" v-model.number="age" /><br />
            性别:<br />
            <label for="sex0">男</label>
            <input type="radio" name="sex" id="sex0" v-model="sex" value="male" />
            <label for="sex1">女</label>
            <input
              type="radio"
              name="sex"
              id="sex1"
              v-model="sex"
              value="female"/><br />
            爱好:<br />
            <label for="xuexi">学习</label>
            <input type="checkbox" id="xuexi" v-model="hobby" value="study" />
            <label for="dyx">打游戏</label>
            <input type="checkbox" id="dyx" v-model="hobby" value="game" />
            <label for="cf">吃饭</label>
            <input type="checkbox" id="cf" v-model="hobby" value="eat" /><br />
            所属校区:
            <select v-model="city">
              <option value="">请选择校区</option>
              <option value="bj">北京</option>
              <option value="tj">天津</option>
              <option value="sd">山东</option></select><br />
            其他信息:
            <textarea
              name=""
              id=""
              cols="16"
              rows="2"
              v-model.lazy="other"></textarea><br />
            <input type="checkbox" v-model="agree" />阅读并接受
            <a href="javascript:;">《用户协议》</a>
            <br />
            <button>提交</button>
          </form>
        </div>
    
    	<script src="./vue.js"></script>
        <script>
          Vue.config.productionTip = false;//取消vue生产模式提示
          let vm = new Vue({
          
            el: '#app',
            data: {
          
              account: '',
              password: '',
              age: '',
              sex: 'female',
              hobby: [], //初始值影响v-model收集数据,多组勾选框要指定value要用数组
              city: '',
              other: '',
              agree: '',
            },
            methods: {
          
              getForm() {
          
              //用JSON.stringify()转换为json格式,尽量不直接访问_data,此处测试所以无妨
                console.log(JSON.stringify(this._data)); 
              },
            },
          });
        </script>