表单绑定的基本用法
Posted yizhiran
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表单绑定的基本用法相关的知识，希望对你有一定的参考价值。
下面的代码实现的有：单行文本、多行文本、复选框（checkbox）、单选按钮（radio）、选择框（selected）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="vue.js" type="text/javascript" charset="utf-8"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <input v-model="message" placeholder="edit me"> 11 <p>Message : {{message}}</p> 12 13 <textarea v-model="message2"placeholder="multiple lines"> 14 </textarea> 15 <p>Message2 : {{message2}}</p> 16 17 <!-- 多个复选框，绑定到同一个数组 --> 18 <input type="checkbox" id="jack" value="Jack" v-model="checkName"> 19 <label for="jack">Jack</label> 20 <input type="checkbox" id="john" value="John" v-model="checkName"> 21 <label for="john">John</label> 22 <input type="checkbox" id="mike" value="Mike" v-model="checkName"> 23 <label for="mike">Mike</label> 24 <p>复选按钮 : {{checkName}}</p> 25 26 <input type="radio" id="one" value="One" v-model="picked"> 27 <label for="one">One</label> 28 <input type="radio" id="two" value="Two" v-model="picked"> 29 <label for="two">Two</label> 30 <input type="radio" id="three" value="Three" v-model="picked"> 31 <label for="three">three</label> 32 <p>单选按钮 : {{ picked }}</p> 33 34 <!-- 单个复选框，绑定到布尔值 --> 35 <input type="checkbox" id="checkbox" v-model="checked"> 36 <label for="checkbox"> {{ checked }}</label> 37 <br> 38 <br> 39 40 <select v-model="selected"> 41 <option value="">请选择</option> 42 <option>A</option> 43 <option>B</option> 44 <option>C</option> 45 </select> 46 <span>Selected: {{ selected }}</span> 47 <br> 48 <br> 49 50 <select v-model="selecteds" multiple style="width: 50px;"> 51 <option>A</option> 52 <option>B</option> 53 <option>C</option> 54 </select> 55 <br> 56 <span>Selecteds: {{ selecteds }}</span> 57 </div> 58 <script type="text/javascript"> 59 var example2 = new Vue({ 60 el: ‘#app‘, 61 data:{ 62 message:"hello", 63 message2:"duohang", 64 checkName:[‘Jack‘], 65 picked:‘‘, 66 checked:false,//这里是布尔值，即使初始化不是布尔值也会转换为布尔值 67 selected:‘‘, 68 selecteds:[‘A‘] 69 }, 70 }) 71 </script> 72 <style type="text/css"> 73 74 </style> 75 </body> 76 </html>
多选时的选择框是不是有问题？还是只能选择一个。
以上代码大部分来自官方文档https://cn.vuejs.org/v2/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95
以及一个博客：https://blog.csdn.net/qq_35713752/article/details/78542787
以上是关于表单绑定的基本用法的主要内容，如果未能解决你的问题，请参考以下文章