From 3cc1135857c27f3ba47433ece7be8975469013c8 Mon Sep 17 00:00:00 2001
From: k&w <2763940480@qq.com>
Date: Sat, 5 Jun 2021 17:44:21 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=98=E6=B2=A1=E5=AE=8C=E6=88=90=E7=9A=84?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E8=BE=93=E5=85=A5=E7=BB=91=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2021-6-5.md"                              | 133 ++++++++++++++++++
 1 file changed, 133 insertions(+)
 create mode 100644 "\350\201\202\350\215\243\347\247\200/2021-6-5.md"
diff --git "a/\350\201\202\350\215\243\347\247\200/2021-6-5.md" "b/\350\201\202\350\215\243\347\247\200/2021-6-5.md"
new file mode 100644
index 0000000..ff08a0d
--- /dev/null
+++ "b/\350\201\202\350\215\243\347\247\200/2021-6-5.md"
@@ -0,0 +1,133 @@
+
+## 文本输入绑定
++ 使用v-model指令时表单控件的值只读取所绑定的数据，而初始化时的value的属性不再考虑
+```
+<body>
+    <div id="app">
+
+        <input type="text" v-model="text" placeholder="随便输入点什么吧！" @input="change" value="✍">
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+    <script>
+        let main=new Vue({
+            el:'#app',
+            data:{
+                text:'奋笔疾书'
+            },
+            methods:{
+                change:function(){
+                    console.log(this.text);
+                }
+            }
+        })
+    </script>
+</body>
+```
+## 复选框
++ 单个复选框，v-model绑定布尔值
+```
+<body>
+    <div id="app">
+        <input type="checkbox" v-model="check" @change="changed">
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let main = new Vue({
+            el: '#app',
+            data: {
+                check: false
+            },
+            methods: {
+                changed: function () {
+                    console.log(this.check);
+                }
+            }
+        })
+    </script>
+</body>
+```
++ 使用多个复选框时，v-model要绑定到同一个数组里
+```
+<body>
+    <div id="app">
+        <p>最能代表你童年的动画片是什么？(多选题)</p>
+        <br>
+        <input type="checkbox" v-model="check" @change="changed" value="《喜羊羊与灰太狼》">《喜羊羊与灰太狼》
+        <br>
+        <input type="checkbox" v-model="check" @change="changed" value="《铠甲勇士》" >《铠甲勇士》
+        <br>
+        <input type="checkbox" v-model="check" @change="changed" value="《迪迦奥特曼》">《迪迦奥特曼》
+        <br>
+        <input type="checkbox" v-model="check" @change="changed" value="《魔法小樱》">《魔法小樱》
+        <br>
+        <input type="checkbox" v-model="check" @change="changed" value="《守护甜心》">《守护甜心》
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let main = new Vue({
+            el: '#app',
+            data: {
+                check: []
+            },
+            methods: {
+                changed: function () {
+                    console.log(this.check);
+                }
+            }
+        })
+    </script>
+</body>
+```
+
+```
+<body>
+    <div id="app">
+        <p>最能代表你童年的动画片是什么？</p>
+        <div v-for="item in radiolist">
+            <input type="radio" v-model="pick" @change="changed" value="item.valuename">{{item.valuename}}
+        </div>
+
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let main = new Vue({
+            el: '#app',
+            data: {
+                check: [],
+                pick: '',
+                radiolist: [
+                    {
+                        id: 1,
+                        valuename: "《喜羊羊与灰太狼》"
+                    },
+                    {
+                        id: 2,
+                        valuename: "《铠甲勇士》"
+                    },
+                    {
+                        id: 3,
+                        valuename: "《迪迦奥特曼》"
+                    },
+                    {
+                        id: 4,
+                        valuename: "《魔法小樱》"
+                    },
+                    {
+                        id: 5,
+                        valuename: "《守护甜心》"
+                    },
+                ]
+            },
+            methods: {
+                changed: function () {
+                    console.log(this.check);
+                }
+            }
+        })
+    </script>
+</body>
+```
\ No newline at end of file
-- 
Gitee

