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

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

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

<!-- 	<input type=‘text’/>,则v-model收集的事vlaue值,
		用户输入的就是value值.
 -->
 <label for="username">账号:</label>
 <input type="text" id="username" v-model.trim="account" />

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

<!-- 	<input type=‘radio’/>,
		则v-model收集的是vlaue值,
		且要给标签配置value值
 -->
  性别:<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’的值

<!-- 	<input type=‘checkbox’/>
	1.没有配置input的value属性,收集的是checked(勾选 or 未勾选,boolean)
	2.配置input的value属性:
		2-1 v-model 的初始值如果是非数组,那么收集的就是checked(勾选 or 未勾选,boolean)
		2-2 v-model 的初始值是数组, 那么收集的就是value组成的数组
 -->
爱好:<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="游泳" />
<!-- 
	//初始值非数组 ，获取到的就是 true Or false, 勾选状态
	hobby:'',  
	//初始值数组   ，获取到的为['跑步','游戏','游泳']这种
	hobby: [], 
 -->

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"搭配使用)

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

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

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

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

 <!--双向数据绑定文档-->
    <!--https://cn.vuejs.org/v2/guide/forms.html-->
    <div id="app">
      <!--会忽略表单元素的value,checked,selected初始值-->
      <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 />
        <!-- 第一个number控制输入数字,第二个v-model.number将收集值转换为数值 -->
        <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>