Vue表单基本特性和表单修饰符(.number和.trim 和.lazy)

Vue表单基本特性和表单修饰符(.number和.trim 和.lazy)

1.表单基本特性

1.1 获取单选框中的值

​ 通过v-model

//1.两个单选框需要同时通过v-model双向绑定 一个值
//2.每一个单选框必须要有value属性,并且value值不能一样
//3.当某一个单选框选中的时候  v-model 会将当前value值改变data中的数据

   <input type="radio" id="male" value="1" v-model='gender'>
   <label for="male">男</label>

   <input type="radio" id="female" value="2" v-model='gender'>
   <label for="female">女</label>

<script>
    new Vue({
         data: {
             // 默认会让当前的 value 值为 2 的单选框选中
                gender: 2,  
            },
    })
</script>

1.2获取复选框中的值

​ 通过v-model

​ 和获取单选框中的值一样

​ 复选框checkbox这种组合时data中的hobby我们要定义成数组,否则无法实现多选

//1.复选框需要同时通过v-model 双向绑定一个值
//2.每一个复选框必须要有value属性,并且value值不能一样
//3.当某一个单选框选中的时候, v-model会将当前的value值改变data中的数据
//hobby 的值就是选中的值，我们只需要实时监控他的值就可以了
<div>
   <span>爱好：</span>
   <input type="checkbox" id="ball" value="1" v-model='hobby'>
   <label for="ball">篮球</label>
   <input type="checkbox" id="sing" value="2" v-model='hobby'>
   <label for="sing">唱歌</label>
   <input type="checkbox" id="code" value="3" v-model='hobby'>
   <label for="code">写代码</label>
 </div>
<script>
    new Vue({
         data: {
                // 默认会让当前的 value 值为 2 和 3 的复选框选中
                hobby: ['2', '3'],
            },
    })
</script>

1.3获取下拉框和文本框中的值

通过v-model

  <div>
      <span>职业：</span>
      //1.需要给select 通过v-model 双向绑定一个值
	  //2.每一个option 必须要有value属性,并且value值不能一样
	  //3.当某一个option选中的时候 v-model 会将当前的value值改变data数据
	  //opt 的值就是选中的值,只需要实时监控他的值就可以了
       <!-- multiple  多选 -->
      <select v-model='opt' multiple>
          <option value="0">请选择职业...</option>
          <option value="1">教师</option>
          <option value="2">软件工程师</option>
          <option value="3">律师</option>
      </select>
         <!-- textarea 是 一个双标签   不需要绑定value 属性的  -->
        <textarea v-model='desc'></textarea>
  </div>
<script>
    new Vue({
         data: {
                // 默认会让当前的 value 值为 2 和 3 的下拉框选中
                 opt: ['2', '3'],
             	 desc: 'nihao'
            },
    })
</script>

2.表单修饰符

2.1 .number转换为数值

​ 注意:当开始输入非数字的字符串时,由于vue无法将字符串转换为数值

​ 所以属性值将实时更新成相同的字符串,即使后面输入数字,也将被视作字符串

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

​ 只能去掉首尾的,不能去掉中间的空格

2.3 .lazy 将input事件切换成change事件

​ .lazy 修饰符延迟了同步更新属性值的时机,即将原本绑定在input事件的同步逻辑转变为绑定在 change事件上,在失去焦点 或者 按下回车键时才更新

<!-- 自动将用户的输入值转为数值类型 -->
<input v-model.number="age" type="number">

<!--自动过滤用户输入的首尾空白字符   -->
<input v-model.trim="msg">

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >