[Vue2]v-model用于表单

        之前我们讲到过v-model用于双向绑定一个数据，通常用于表单提交数据。而之前的演示里只演示了文本输入栏，这里详细演示一下其他表单输入时利用v-model。
文本输入

        文本输入数据就是经典的type="text"：

1. <input type="text">

复制代码

        直接利用v-model绑定一个数据：

1. <input type="text" v-model="MyText">
3. <script>
5.     const app = new Vue({
6.         el: '#app',
7.         data: {
8.             MyText:""
9.         }
10.     })
12. </script>

复制代码

        绑定之后，在输入框中输入的数据会及时同步给变量MyText。而后台的页面资源中的变量MyText假如变动，也会立刻同步给输入框里的文本。
        在这种输入条件下，v-model传递的数据是一个String类型（当然输入格式准确可以被转换为其他，如123可以转化为数值类型，不外需要额外举行设置）

复选框输入

        复选框是type="checkbox"的输入格式。
        与文本输入不同，复选框绑定一个数据之后，页面和变量之间传递的数据是布尔值，也就是true或者false。
        利用方法倒是与文本输入大差不差：

1. <input type="check" v-model="isSingle">
3. <script>
5.     const app = new Vue({
6.         el: '#app',
7.         data: {
8.             isSingle:false
9.         }
10.     })
12. </script>

复制代码

单选框输入

        这里先讲一下单选框的一些相干知识：
        单选框的type的值为radio，也就是type="radio"。想要用单选框还得给单选框的每个选项元素分组并分到同一个组里，分组利用属性name：

1. <input type="radio" name="zubie1">北京
2. <input type="radio" name="zubie1">上海

复制代码

        分组之后，同一个组里的单选框选项彼此之间会排斥，当此中一个被勾选时，其他选项不会被勾选。
        然后我们还想要利用value属性，用于传递数据。欸，有人要问了，这上面不是写了北京和伤害吗？为什么还要用value？
        上面的写的北京和上海是展示给用户看的，现实上这个选项框没有绑定数据。想要给该选项框给予一个数据，用于在其被选中时传递给后台，就要利用value给该选项框赋值。然后再利用v-model，绑定后端一个变量，这个变量的取值必须是单选框组里的值的此中一个，这样前端页面才气够相应到对应的单选框上：

1. <input type="radio" name="zubie1" value="beijin" v-model="area">北京
2. <input type="radio" name="zubie1" value="shanghai" v-model="area">上海
4. <script>
6.     const app = new Vue({
7.         el: '#app',
8.         data: {
9.             area:"beijin"
10.         }
11.     })
13. </script>

复制代码

下拉选项框输入

        下拉选项框与单选框的利用相似。简朴先容一下下拉选项框，下拉选项框利用<select>标签定义，在此中利用子标签<option>来定义下拉菜单中的可选值。同样的，在<option>的文本中的内容只是展示给用户看的，我们需要利用value属性给每个下拉选项赋值。赋了值之后，与单选框不同，我们v-model是写在<select>中，不消写在子标签<option中>：

1. <select v-model="area">
2.     <option value="beijin">北京</option>
3.     <option value="shanghai">上海</option>
4.     <option value="shenzhen">深圳</option>
5. </select>
7. <script>
9.     const app = new Vue({
10.         el: '#app',
11.         data: {
12.             area:"beijin"
13.         }
14.     })
16. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。