diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.05.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.05.md" new file mode 100644 index 0000000000000000000000000000000000000000..7c086ebb661395979d03c3fbc9fe5a3215bf6b48 --- /dev/null +++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.05.md" @@ -0,0 +1,84 @@ +## Vue.js 第五节课 (表单输入绑定) + +### 表单输入绑定 + +#### v-model指令　　 + ++ 用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。 + ++ v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源 +#### 基础用法 + +1. v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件： + ++ text 和 textarea 元素使用 value 属性和 input 事件； ++ checkbox 和 radio 使用 checked 属性和 change 事件； ++ select 字段将 value 作为 prop 并将 change 作为事件。 + +代码如下（in6-5html） +``` +
+ + +
+
+ +
+

{{msg}}

+

good

+

lisa

+ +
+ + + + good nice: {{ checkedNames }} +
+
+ + + + + +
+ 你是:{{picked}} +
+ + +
+ Lisa：{{green}} +
+ +
+ + +``` +``` + +``` \ No newline at end of file diff --git "a/\346\242\201\350\211\272\347\274\244/Vue/6-5.html" "b/\346\242\201\350\211\272\347\274\244/Vue/6-5.html" new file mode 100644 index 0000000000000000000000000000000000000000..e35f04994b09e02ad497765653213955d13f731f --- /dev/null +++ "b/\346\242\201\350\211\272\347\274\244/Vue/6-5.html" @@ -0,0 +1,81 @@ + + + + + + 6.5 + + + +
+ + +
+ + + + + lisa:{{ checked }} +
+ 男 + 女 + lisa:{{picked}} + +
+ + {{ selected }} +
+ +
+ +
+ Selected: {{ selected }} +
+
+ + + + + + + + + + + + +
+ + + + + + \ No newline at end of file diff --git "a/\346\242\201\350\211\272\347\274\244/Vue/ind6-5.html" "b/\346\242\201\350\211\272\347\274\244/Vue/ind6-5.html" new file mode 100644 index 0000000000000000000000000000000000000000..76cad30faddbe7a7852bc6028e81c9ed1a3e1e00 --- /dev/null +++ "b/\346\242\201\350\211\272\347\274\244/Vue/ind6-5.html" @@ -0,0 +1,78 @@ + + + + + + + Document + + + +
+ + +
+
+ +
+

{{msg}}

+

good

+

lisa

+ +
+ + + + good nice: {{ checkedNames }} +
+
+ + + + + +
+ 你是:{{picked}} +
+ + +
+ Lisa：{{green}} +
+ +
+ + + + + + + + +