基本用法

在之前的博客里面只是草草写了 v-model 的用法，没有深入
因为 v-model 是 Vue 里面非常重要的指令，所以我们这次深入实践一下用法

v-model：

用于在表单类元素上的双向绑定

文本

可以用于input框，以及textarea等
注意： 所显示的值只依赖于所绑定的数据，
不再关心初始化时的插入的value

单行文本

input

  1. <!-- html -->
  2.         v-model 的基本用法：<br>
  3.         <input type="text" v-model="textValue"> <br>
  4.         {{textValue}}
  6. <script>
  7.     let vue = new Vue({
  8.         el: "#app",
  9.         data: {
  10.             textValue:'嘿嘿，我是单行文本',
  12.         }
  13.     })
  14. </script>

多行文本

  1. <!-- html -->
  2.     <textarea name="" id="" cols="30" rows="10" v-model="textareaValue"></textarea>
  3.     <br>
  4.     {{textareaValue}}
  5. <script>
  6.     data: {
  7.             textareaValue: '嘿嘿,我是多行文本',
  8.     }
  9. </script>

单选按钮

单个单选按钮，
直接用v-­bind/v-model绑定一个布尔值，一般是 false，给空字符串也行
注意用 v-model 时，并不能绑定到值，所以建议用 v-bind
多个单选按钮也一样

单个单按钮

  1. <!-- html -->    
  2.     单选框 <br>
  3.     --------------- <br>
  4.     单个单选框 <br>
  5.     单个单选框---用v-bind： <input type="radio"  v-bind:checked="oneradio"> <br>
  6.     单个单选框---用v-model： <input type="radio"  v-model="oneradio2"> <br>
  7. <script>
  8.     data: {
  9.               oneradio: false,
  10.          oneradio2: false,
  11.     }
  12. </script>

多个单按钮

  1. <!-- html -->       
  2.         多个单选框 <br>
  3.     投票 TI11 获胜方：<br>
  4.     <input type="radio" id="one" value="LGD" v-model="result">
  5.     <label for="one">LGD</label>
  6.     <input type="radio" id="two" value="OG" v-model="result">
  7.     <label for="one">OG</label>
  9.     <div>获胜方：{{result}}</div>
  10.         <script>
  11.             data: {
  12.                         result: '',
  13.             }
  14.         </script>

复选按钮

单个复选框:
直接用定一个布尔值，可以用v­-model可以用v-­bind
多个复选框
如果是组合使用，就需要v­model来配合value使用，v­-model绑定一 个数组—
如果绑定的是字符串，则会转化为true。false，与所有绑定的复选框的 checked属性相对应

单个复选按钮

  1. <!-- html -->     
  2.     单个复选按钮 <br>
  3.     <input type="checkbox" id="checkbox" v-model="checked">
  4.     <label for="checkbox">{{ checked }}</label> <br>
  5. <script>
  6.     data: {
  7.            checked : false,
  8.     }
  9. </script>

多个复选按钮

  1. <!-- html -->      
  2.         多个复选按钮 <br>
  3.     世界最强中单投票: <br>
  4.     <input type="checkbox" id="jack" value="Maybe" v-model="checkedNames">
  5.     <label for="Maybe">Maybe</label>
  6.     <input type="checkbox" id="john" value="Topson" v-model="checkedNames">
  7.     <label for="Topson">Topson</label>
  8.     <input type="checkbox" id="mike" value="Zard~" v-model="checkedNames">
  9.     <label for="Zard~">Zard~</label>
  10.     <br>
  11.     <span>Checked names: {{ checkedNames }}</span>
  12. <script>
  13.     data: {
  14.            checkedNames : [],
  15.     }
  16. </script>

下拉框

如果是单选，所绑定的value值初始化可以为数组，也可以为字符串，有value直接优先匹配一个value值，没有value就匹配一个text值
如果是多选，就需要v­-model来配合value使用，v-­model绑定一个数组，与复选框类 似
v­-model一定是绑定在select标签上

单选下拉框

  1. <!-- html -->
  2.         单选的下拉框：<br>
  3.     <select v-model="selected">
  4.         <option value="A">A</option>
  5.         <option value="B">B</option>
  6.         <option value="C">C</option>
  7.     </select>----------现在选中的是 {{selected}} <br>
  8.         <script>
  9.             data: {
  10.                    selected : []
  11.             }
  12.         </script>

多选下拉框

  1. <!-- html -->   
  2.     <select v-model="selectedmul" multiple>
  3.         <option value="A">A</option>
  4.         <option value="B">B</option>
  5.         <option value="C">C</option>
  6.     </select>----------现在选中的是 {{selectedmul}}
  7.         <script>
  8.             data: {
  9.                    selectedmul : []
  10.             }
  11.         </script>

小结

如果是单选，初始化最好给空字符串，因为 v-model 此时绑定的是静态字符串或者布尔值
如果是多选，初始化给定一个空数组

绑定值

单选按钮

单选按钮中，v-model 是不能绑定绑定值的，如果一定要绑定，需要用到 v-bind

  1. <!-- html -->      
  2.         单选按钮：<input type="radio" v-model="pick" :value="LGD"> <br>
  3.     此时 pick === data 中声明 LGD 的值 <br>
  4.     {{pick}}
  5.         <script>
  6.             data: {
  7.                    pick: true,
  8.             LGD: '老干爹是不可战胜的',
  9.             }
  10.         </script>

多选按钮

  1. <!-- html --> 
  2.         复选按钮 <br>
  3.     <input type="checkbox" v-model="toggle" :ture-value="trueValue" :false-value="falseValue">
  4.     <br>
  5.     toggle:{{toggle}} <br>
  6.     被选中 {{toggle == trueValue}} <br>
  7.     未选中 {{toggle == falseValue}} <br>
  8.     下拉菜单 <br>
  9.         <script>
  10.             data: {
  11.             toggle: true,
  12.             trueValue: "trueValue",
  13.             falseValue: "falseValue"
  14.             }
  15.         </script>

下拉菜单

在select标签上绑定value值对option并没有影响
但可以对 option 的每一项绑定一个值

  1.     <!-- html --> 
  2.         在select标签上绑定value值对option并没有影响
  3.     <select v-model="selectValue" :value="{num:9527}">
  4.         <option value="A">A</option>
  5.         <option value="B">B</option>
  6.         <option value="C">C</option>
  7.     </select> <br>
  8.     现在选中的值是 {{selectValue}} <br>
  9.     类型是{{typeof selectValue}}
  10.     <br>
  11.         <script>
  12.             data: {
  13.             selectValue: "",
  14.             }
  15.         </script>
  18.           //<option value="A" :value="{num:9527}">A</option>
  19.           //这样才行

修饰符

.lazy

v­-model默认是在input输入时实时同步输入框的数据，
.lazy修饰符，可以使其在失去焦点或者敲回车键之后在更新

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

.number

将输入的字符串转化为number类型

  1. <input v-model.number="age" type="number">

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

  1. <input v-model.trim="msg">