From 61aae94395679cb8b437ce84bdb02b0f6422b130 Mon Sep 17 00:00:00 2001
From: xiaoyou <2232705454@qq.com>
Date: Sat, 5 Jun 2021 16:21:27 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E5=8D=95=E8=BE=93=E5=85=A5=E7=BB=91?=
 =?UTF-8?q?=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2021-06-05-vue.md"                        | 61 +++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 "\346\270\270\346\265\267\346\236\227/2021-06-05-vue.md"
diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-05-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-05-vue.md"
new file mode 100644
index 0000000..5bc3000
--- /dev/null
+++ "b/\346\270\270\346\265\267\346\236\227/2021-06-05-vue.md"
@@ -0,0 +1,61 @@
+# 表单输入绑定
+
+
+### 绑定的属性和事件
+
+1. v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：
+
++ text和textarea元素使用value属性和input事件。
++ checkbox和radio使用checked属性和change事件。
++ select字段将value作为prop并将change作为事件。
+
+2. input绑定
+
+```
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>vuedemo</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+</head>
+<body>
+ 
+<div id="app">
+    <input v-model="message" placeholder="请输入message值...">
+    <p>message值：{{ message }}</p>
+</div>
+ 
+<script>
+    new Vue({
+        el: '#app',
+        data: {
+            message: '改我'
+        }
+    });
+</script>
+</body>
+</html>
+```
+
+3. 修饰符
+```
+ .lazy：
+在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加lazy修饰符，从而转变为使用change事件进行同步：
+
+
+<!-- 在“change”时而非“input”时更新 -->
+<input v-model.lazy="msg" >
+.number：
+如果想自动将用户的输入值转为数值类型，可以给v-model添加number修饰符：
+
+
+<input v-model.number="age" type="number">
+这通常很有用，因为即使在type="number"时，HTML输入元素的值也总会返回字符串。如果这个值无法被parseFloat()解析，则会返回原始的值。
+
+.trim：
+如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
+
+
+<input v-model.trim="msg">
+```
\ No newline at end of file
-- 
Gitee

