vue

vue/表单输入绑定v-model.md

@@ -0,0 +1,175 @@
+# 表单输入绑定 v-model
+
+### 基本用法
+
+用v-model 指令在表单input, textarea, select 元素上创建双向绑定值
+
+v-model 使用时，会忽略所有表单元素的value, checked, selected 属性设置的初始值，表单元素的初始值由v-model的初始值决定
+
+
+
+v-model为不同的输入元素使用不同的property并抛出不同的事件
+
+- text 和 textarea 元素使用 `value` property 和 `input` 事件；
+- checkbox 和 radio 使用 `checked` property 和 `change` 事件；
+- select 字段将 `value` 作为 prop 并将 `change` 作为事件。
+
+### v-model 使用
+
+语法：v-model="data中的属性"
+
+示例：
+
+- 文本
+
+  ```
+  <input v-model="message" placeholder="edit me">
+  <p>Message is: {{ message }}</p>
+  ```
+
+  
+
+- 多行文本
+
+  ```
+  <span>Multiline message is:</span>
+  <p style="white-space: pre-line;">{{ message }}</p>
+  <br>
+  <textarea v-model="message" placeholder="add multiple lines"></textarea>
+  ```
+
+  
+
+- 复选框
+
+  - 单个复选框
+
+  ```
+  <input type="checkbox" id="checkbox" v-model="checked">
+  <label for="checkbox">{{ checked }}</label>
+  ```
+
+  ![image-20201222175835286](表单输入绑定v-model.assets/image-20201222175835286.png)未选中
+
+  
+
+  ​	![image-20201222175902811](表单输入绑定v-model.assets/image-20201222175902811.png)    已选中
+
+  
+
+  - 多个复选框  绑定到同一个数组
+
+    ```
+    <input type="checkbox" id="jack" value="Jackval" v-model="checkedNames">
+    <label for="jack">Jack</label>
+    <input type="checkbox" id="john" value="Johnval" v-model="checkedNames">
+    <label for="john">John</label>
+    <input type="checkbox" id="mike" value="Mikeval" v-model="checkedNames">
+    <label for="mike">Mike</label>
+    <br>
+    <span>Checked names: {{ checkedNames }}</span>
+    ```
+
+    ```
+    new Vue({
+      el: '...',
+      data: {
+        checkedNames: []
+      }
+    })
+    ```
+
+    未选择时：![image-20201222180149362](表单输入绑定v-model.assets/image-20201222180149362.png)
+
+    选中时：![image-20201222180209565](表单输入绑定v-model.assets/image-20201222180209565.png)
+
+    > 注 选中的时候v-modal对应的是input元素的value 属性
+
+- 单选按钮
+
+  ```
+  <div id="example-4">
+    <input type="radio" id="one" value="Oneval" v-model="picked">
+    <label for="one">One</label>
+    <br>
+    <input type="radio" id="two" value="Twoval" v-model="picked">
+    <label for="two">Two</label>
+    <br>
+    <span>Picked: {{ picked }}</span>
+  </div>
+  ```
+
+  ```
+  new Vue({
+    el: '#example-4',
+    data: {
+      picked: ''
+    }
+  })
+  ```
+
+  未选时：![image-20201222180600963](表单输入绑定v-model.assets/image-20201222180600963.png)
+
+  选择后：
+
+  ![image-20201222180642082](表单输入绑定v-model.assets/image-20201222180642082.png)
+
+  > 注 选中的时候v-modal对应的是input元素的value 属性
+
+- 选择框
+
+  - 单选：
+
+  ```
+  <div id="example-5">
+    <select v-model="selected">
+      <option disabled value="">请选择</option>
+      <option>A</option>
+      <option>B</option>
+      <option>C</option>
+    </select>
+    <span>Selected: {{ selected }}</span>
+  </div>
+  ```
+
+  ```
+  new Vue({
+    el: '...',
+    data: {
+      selected: ''
+    }
+  })
+  ```
+
+  
+
+  未选择：![image-20201222180952802](表单输入绑定v-model.assets/image-20201222180952802.png)
+
+  选择后：![image-20201222181015791](表单输入绑定v-model.assets/image-20201222181015791.png)
+
+  > 注 选中的时候v-modal对应的是option元素的value属性
+
+  - 多选
+
+    ```
+    <div id="example-6">
+      <select v-model="selected" multiple style="width: 50px;">
+        <option>A</option>
+        <option>B</option>
+        <option>C</option>
+      </select>
+      <br>
+      <span>Selected: {{ selected }}</span>
+    </div>
+    ```
+
+    ```
+    new Vue({
+      el: '#example-6',
+      data: {
+        selected: []
+      }
+    })
+    ```
+
+