From bfc2abad817910dd8f224ebfd2a9d7b1e717310f Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sat, 5 Jun 2021 17:42:24 +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

---
 ...3\345\205\245\347\273\221\345\256\232).md" | 115 ++++++++++++++++++
 1 file changed, 115 insertions(+)
 create mode 100644 "\346\235\250\345\256\207\346\226\214/note-2021-06-05(\347\254\254\345\205\253\350\212\202\350\257\276 \350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232).md"

diff --git "a/\346\235\250\345\256\207\346\226\214/note-2021-06-05(\347\254\254\345\205\253\350\212\202\350\257\276 \350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232).md" "b/\346\235\250\345\256\207\346\226\214/note-2021-06-05(\347\254\254\345\205\253\350\212\202\350\257\276 \350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232).md"
new file mode 100644
index 0000000..3e935a7
--- /dev/null
+++ "b/\346\235\250\345\256\207\346\226\214/note-2021-06-05(\347\254\254\345\205\253\350\212\202\350\257\276 \350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232).md"	
@@ -0,0 +1,115 @@
+# 2021-6-5 Vue.js  Vue 事件处理
+
+## 文本 多行文本 复选框 单选按钮 选择框
++ 多选时 (绑定到一个数组)
++ multiple 可接受多个值的文件上传字段
+```
+<div id="app">
+        <!-- 文本 -->
+        <input type="text" v-model="tet" @input="test">
+        <p></p>
+        <br>
+
+        <!-- 多行文本 -->
+        <textarea name="" id="" cols="30" rows="10" v-model="textareaes" @input="ontextareaes"></textarea>
+        <br>
+
+        <!-- 复选框 -->
+        <input type="checkbox" v-model="check" @change="oncheck" value="西瓜">西瓜
+        <input type="checkbox" v-model="check" @change="oncheck" value="冬瓜">冬瓜
+        <input type="checkbox" v-model="check" @change="oncheck" value="南瓜">南瓜
+        <input type="checkbox" v-model="check" @change="oncheck" value="东瓜">东瓜
+
+        <br>
+
+        <!-- 单选按钮 -->
+        <input type="radio" v-model="radioes" @change="onradioes" value="跑步">跑步
+        <input type="radio" v-model="radioes" @change="onradioes" value="跳伞">跳伞
+        <input type="radio" v-model="radioes" @change="onradioes" value="游泳">游泳
+        <input type="radio" v-model="radioes" @change="onradioes" value="打球">打球
+
+        <br>
+        <!-- 选择框 -->
+        <select multiple v-model="selectes" @change="onselectes">
+            <option disabled value="">选择</option>
+            <option value="A">A</option>
+            <option value="B">B</option>
+            <option value="C">C</option>
+        </select>
+
+        <br>
+
+        <div v-for="item in todos">
+            <input type="radio" v-model="radioestest" @change="onradioestest" :value="item.valuename">{{item.name}}
+        </div>
+        
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        var app = new Vue({
+            el: "#app",
+            data: {
+                tet:"",
+                textareaes:"",
+                check:[],
+                radioes:'',
+                selectes:[],
+                radioestest:'',
+                todos:[
+                    {id:1,name:'跑步',valuename:'跑步'},
+                    {id:2,name:'跳伞',valuename:'跳伞'},
+                    {id:3,name:'游泳',valuename:'游泳'},
+                    {id:4,name:'打球',valuename:'打球'}
+                ]
+            },
+            methods:{
+                test:function(){
+                    console.log(this.tet);
+                },
+                ontextareaes:function(){
+                    console.log(this.textareaes);
+                },
+                oncheck:function(){
+                    console.log(this.check);
+                },
+                onradioes:function(){
+                    console.log(this.radioes);
+                },
+                onselectes:function(){
+                    console.log(this.selectes);
+                },
+                onradioestest:function(){
+                    console.log(this.radioestest);
+                }
+            }
+        })
+    </script>
+```
+## 值绑定
++ value
+```
+<!-- 当选中时，`picked` 为字符串 "a" -->
+<input type="radio" v-model="picked" value="a">
+
+<!-- `toggle` 为 true 或 false -->
+<input type="checkbox" v-model="toggle">
+
+<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
+<select v-model="selected">
+  <option value="abc">ABC</option>
+</select>
+
+<input type="radio" v-model="pick" v-bind:value="a">
+{{pick}}
+// 当选中时
+vm.pick === vm.a
+```
+## 修饰符
++ .lazy 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步
++ .number  自动将用户的输入值转为数值类型
++ .trim 自动过滤用户输入的首尾空白字符
+```
+    <input type="text" v-model.lazy="tet" @input="test">
+```
\ No newline at end of file
-- 
Gitee