[Vue2]v-model用于表单
之前我们讲到过v-model用于双向绑定一个数据，通常用于表单提交数据。而之前的演示里只演示了文本输入栏，这里详细演示一下其他表单输入时利用v-model。文本输入
文本输入数据就是经典的type="text"：
<input type="text"> 直接利用v-model绑定一个数据：
<input type="text" v-model="MyText">
<script>
const app = new Vue({
el: '#app',
data: {
MyText:""
}
})
</script> 绑定之后，在输入框中输入的数据会及时同步给变量MyText。而后台的页面资源中的变量MyText假如变动，也会立刻同步给输入框里的文本。
在这种输入条件下，v-model传递的数据是一个String类型（当然输入格式准确可以被转换为其他，如123可以转化为数值类型，不外需要额外举行设置）
复选框输入
复选框是type="checkbox"的输入格式。
与文本输入不同，复选框绑定一个数据之后，页面和变量之间传递的数据是布尔值，也就是true或者false。
利用方法倒是与文本输入大差不差：
<input type="check" v-model="isSingle">
<script>
const app = new Vue({
el: '#app',
data: {
isSingle:false
}
})
</script>
单选框输入
这里先讲一下单选框的一些相干知识：
单选框的type的值为radio，也就是type="radio"。想要用单选框还得给单选框的每个选项元素分组并分到同一个组里，分组利用属性name：
<input type="radio" name="zubie1">北京
<input type="radio" name="zubie1">上海 分组之后，同一个组里的单选框选项彼此之间会排斥，当此中一个被勾选时，其他选项不会被勾选。
然后我们还想要利用value属性，用于传递数据。欸，有人要问了，这上面不是写了北京和伤害吗？为什么还要用value？
上面的写的北京和上海是展示给用户看的，现实上这个选项框没有绑定数据。想要给该选项框给予一个数据，用于在其被选中时传递给后台，就要利用value给该选项框赋值。然后再利用v-model，绑定后端一个变量，这个变量的取值必须是单选框组里的值的此中一个，这样前端页面才气够相应到对应的单选框上：
<input type="radio" name="zubie1" value="beijin" v-model="area">北京
<input type="radio" name="zubie1" value="shanghai" v-model="area">上海
<script>
const app = new Vue({
el: '#app',
data: {
area:"beijin"
}
})
</script>
下拉选项框输入
下拉选项框与单选框的利用相似。简朴先容一下下拉选项框，下拉选项框利用<select>标签定义，在此中利用子标签<option>来定义下拉菜单中的可选值。同样的，在<option>的文本中的内容只是展示给用户看的，我们需要利用value属性给每个下拉选项赋值。赋了值之后，与单选框不同，我们v-model是写在<select>中，不消写在子标签<option中>：
<select v-model="area">
<option value="beijin">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select>
<script>
const app = new Vue({
el: '#app',
data: {
area:"beijin"
}
})
</script>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]