vue常用特性--day02

---

个人blog-1： 拾忆生活
个人blog-2： 极简-拾忆生活
欢迎大家来踩，同步更新

---

表单基本操作

1.获取单选框中的值（一个默认值）
每一个单选框必须要有value属性，且value 值不能一样

• $通过v-model双向绑定,类似input的name属性$
  • v-model=‘gender’
• data中，与v-model联动，是默认值
  • data: {gender: 2}

2.获取复选框中的值（一个数组）
每一个复选框必须要有value属性，且value 值不能一样

• data 中的 xxx 我们要定义成数组，否则无法实现多选
  • v-model=‘hobby’
• data中，与v-model联动，是默认值
  • hobby: [‘2’, ‘3’]

3.获取下拉框和文本框中的值
每一个 option 必须要有value属性，且value 值不能一样

• 需要给 select 通过 v-model 双向绑定一个值，multiple 多选
  • <select v-model='occupation' multiple>
• 当某一个option 选中的时候 v-model 会将当前的 value值 改变 data 中的 数据,使用实时监控occupation的值，有默认值
  • occupation: [‘2’, ‘3’]

<form action="#">
      <div>
        <span>姓名：</span>
        <span><input type="text" v-model='uname'></span>
      </div>
      <!-- 单选 -->
      <div>
        <span>性别：</span>
        <span>
          <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>
        </span>
      </div>
      <!-- 复选 -->
      <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>
      <!-- 下拉列表 -->
       <!-- multiple  多选 -->
       <!-- textarea 是 一个双标签，不需要绑定value 属性的  -->
      <div>
        <span>职业：</span>
          <option value="0">请选择职业...</option>
          <option value="1">教师</option>
          <option value="2">软件工程师</option>
          <option value="3">律师</option>
        </select>
      </div>

      <div>
        <span>个人简介：</span>
        <textarea v-model='desc'></textarea>
      </div>

      <div>
        <input type="submit" value="提交" @click.prevent='handle'>
      </div>

    </form>
  <script>
      new Vue({
    
           data: {
    
               // 默认会让当前的 value 值为 2 的单选框选中
                  gender: 2,
                  hobby: ['2', '3'],  
                  occupation: ['2', '3'],
                  desc: 'nihao'
              },
      })
  </script>

v-model表单修饰符

• $Vue无法将字符串转换成数值$
  • 当开始输入非数字的字符串时，属性值将实时更新成相同的字符串。
  • 即使后面输入数字，也将被视作字符串。
• .number 【转换为数值】
  • 字符串转数值
• .trim 【自动过滤用户输入的首尾空白字符，算长度可理解】
  • 只能去掉首尾的空格
• .lazy 【将input事件切换成change事件】
  • 延迟了同步更新属性值的时机。
  • 将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上

.lazy注意点：

• change事件是 在 失去焦点 或者 按下回车键 才触发
• input事件是 每次输入内容 都触发

.lazy使用场景：

• 在用户输入信息，离开焦点时，立即做一个信息有无在数据库中注册的验证

  <!-- 自动将用户的输