v-model

1. 作用：给 表单元素 使用，形成 双向数据绑定，可以快速 获取或设置 表单元素内容，v-model会根据 控件类型 的不同自动选取 正确的方法 来更新元素。（常见的表单元素有 input:text输入框、textarea文本域、radio单选框、checkbox复选框、select下拉菜单等等）

             ① 数据变化，视图自动更新

             ② 视图变化，数据自动更新

 

输入框   input : text    →    value

文本域   textarea       →    value

下拉菜单   select       →    value

复选框   input : checkbox   →   checked

单选框   input : radio          →   checked

 

2. 语法：v-model = " data中定义的变量 "

            eg：输入框：<input  type = "text"  v-model = "username">

                   文本域：<textarea   v-model = "desc"></textarea>

                   复选框：<input  type = "checkbox"  v-model = "isSingle">（注意：变量 isSingle 是布尔类型，true则选中，false不会选中）

                   单选框：（name属性可以分组，同一组互相会互斥；value属性是提交给后台的数据）

                               <input   type = "radio"   v-model = "gender"   name = "gender"   value = "1"> 男

                               <input   type = "radio"   v-model = "gender"   name = "gender"   value = "0"> 女

                   下拉菜单：（option 需要设置 value 值，用于提交给后台；select 标签是有 value 值的，关联了选中的 option 的 value 值，比如若上海被选中，则上海的 value 值 Shanghai 就赋给了select 标签的 value 值）

                               <select   v-model = " city ">

                                       <option   value = "Shanghai"> 上海 </option>

                                       <option   value = "Beijing"> 北京 </option>

                                       <option   value = "Hebei"> 河北 </option>

                               </select>

 

3. 补充：

      v-model.trim = " data中定义的变量 " ：把输入框中输入的内容自动去掉前后空格之后，再与变量绑定；

      v-model.number= " data中定义的变量 " ：尝试把输入框中输入的内容转成 int 类型，再与变量绑定。如果输入的是类似 "abc" 这种不能转成 int 类型的内容，则会保持原来的String类型，不再进行自动转换。