“Vue从入门到实战:复选框”的版本间的差异
来自CloudWiki
(创建页面,内容为“复选框在单独使用和多个复选框一起使用时,v-model绑定的值会有所不同, 对于前者,绑定的是布尔值,选中则值为true 后者…”) |
|||
第4行: | 第4行: | ||
后者绑定的是同一个数组,选中时复选框的值被保存到数组中。 | 后者绑定的是同一个数组,选中时复选框的值被保存到数组中。 | ||
+ | |||
+ | <nowiki> | ||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <meta charset="UTF-8"> | ||
+ | <title></title> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div id = "app"> | ||
+ | <h3>单个复选框:</h3> | ||
+ | <input id="agreement" type="checkbox" v-model="isAgree"> | ||
+ | <label for="agreement">{{ isAgree }}</label> | ||
+ | |||
+ | <h3>多个复选框:</h3> | ||
+ | <input id="basketball" type="checkbox" value="篮球" v-model="interests"> | ||
+ | <label for="basketball">篮球</label> | ||
+ | <input id="football" type="checkbox" value="足球" v-model="interests"> | ||
+ | <label for="football">足球</label> | ||
+ | <input id="volleyball" type="checkbox" value="排球" v-model="interests"> | ||
+ | <label for="volleyball">排球</label> | ||
+ | <input id="swim" type="checkbox" value="游泳" v-model="interests"> | ||
+ | <label for="swim">游泳</label> | ||
+ | |||
+ | <p>你的兴趣爱好是: {{ interests }}</p> | ||
+ | </div> | ||
+ | |||
+ | <script src="vue.js"></script> | ||
+ | <script> | ||
+ | var vm = new Vue({ | ||
+ | el: '#app', | ||
+ | data: { | ||
+ | isAgree: false, | ||
+ | interests: [] | ||
+ | } | ||
+ | }); | ||
+ | </script> | ||
+ | </body> | ||
+ | </html></nowiki> |
2021年2月9日 (二) 08:48的版本
复选框在单独使用和多个复选框一起使用时,v-model绑定的值会有所不同,
对于前者,绑定的是布尔值,选中则值为true
后者绑定的是同一个数组,选中时复选框的值被保存到数组中。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id = "app"> <h3>单个复选框:</h3> <input id="agreement" type="checkbox" v-model="isAgree"> <label for="agreement">{{ isAgree }}</label> <h3>多个复选框:</h3> <input id="basketball" type="checkbox" value="篮球" v-model="interests"> <label for="basketball">篮球</label> <input id="football" type="checkbox" value="足球" v-model="interests"> <label for="football">足球</label> <input id="volleyball" type="checkbox" value="排球" v-model="interests"> <label for="volleyball">排球</label> <input id="swim" type="checkbox" value="游泳" v-model="interests"> <label for="swim">游泳</label> <p>你的兴趣爱好是: {{ interests }}</p> </div> <script src="vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { isAgree: false, interests: [] } }); </script> </body> </html>