丁鹿学堂前端培训：vue中表单知识点总结

1. vue中表单通过v-model进行数据的双向绑定

  <input type="text" v-model="content">
// ---------
    data(){
      return {
       num:1,
       content:'我是双向绑定的内容哦！'
      }
    }

1. input 可以表示复选框，这个时候v-model绑定一个布尔值，true表示选中，false表示没有选中。

<input type="checkbox" v-model="check">

1. input的checkbox多选的话注意两点 1 v-model要绑定数组， 2 input要加value表示选项

    <input type="checkbox" v-model="checkArr" value="吃饭"> 吃饭
    <input type="checkbox" v-model="checkArr" value="睡觉"> 睡觉
    <input type="checkbox" v-model="checkArr" value="打豆豆"> 打豆豆
    // ----
     data(){
      return {
       checkArr:[],
      }
    },

表单修饰符

1. lazy修饰符，鼠标光标离开后触发

 <input type="text" v-model.lazy="content">

2.number修饰符，输入的数据为数字的数据结构而不是字符串

 <input type="text" v-model.number="content">

3.trim清楚输入前后的空格

 <input type="text" v-model.trim="content">