原生input使用+v-model在input中使用

单选框(radio)

原生知识

form标签

• form标签内若是存在button按钮，则当按钮点击时，默认会触发form标签的 submit事件(提交表单事件)
  • 提交地址为 action属性值设置的地址
  • 提交的请求 默认为get请求
  • 若是form标签间的标签存在 name属性 -> 将会以name属性值作为key 以用户输入的值作为 value 拼接在url上作为参数进行传递；

input标签

• [1] type属性值设置为 radio 则该标签表示的是单选框；
• [2] value属性值是要传递给后端的数据
• [3] 在有多个单选框时
  • 设置相同的name属性值表示这些单选框之间的选择是互斥的；
  • 若是不设置name属性，那么可以同时选择多个多选框；

原生使用举例

 <form action="xxx">
   <input type="radio" value="wxpay" name='pay'/> 微信支付
   <input type="radio" value='zfbpay' v-model="value" name="pay" /> 支付宝支付
   <button>提交</button>
 </form>
1
2
3
4
5

当选择微信支付，点击提交按钮时默认会向xxx地址发送一个请求，请求url为 xxx?pay=‘wxpay’
当选择支付宝支付，点击提交按钮时默认会向xxx地址发送一个请求，请求url为 xxx?pay=‘zfbpay’

在vue中进行双向绑定

首先看一下v-model进行双向绑定的原理
这也是为什么 原生input标签可以使用v-model的原因了

• value属性值进行数据传递
• input事件进行数据修改

在type为radio时

• 若是多个单选框使用v-model绑定了相同的值时，则他们的选择是互斥的（不需要name属性值的设置也互斥）
• 当点击哪个按钮时，会自动将 value属性的属性值赋值给v-model