对于用户信息的提交,需要大量表单。
vue中使用v-model来实现表单元素和数据的双向绑定
一、v-model原理
v-model其实是一个语法糖,本质是包含两个操作:
-
v-bind
绑定一个value属性 -
v-on
给当前元素绑定input时间
相当于以下代码:
<input type="text" :value='message' @input='message = $event.target.value'>
二、v-model:radio
下面演示v-model与单选框radio的联合使用,可以通过加v-model属性让两个单选框的选择属性互斥,在data中可以定义默认选项,也可为空(都不选)。
添加v-model后还能将选择的选项的value值传递。
<div id="app">
<label for="">
<input type="radio" id="male" value="男" v-model='sex'>男
</label>
<label>
<input type="radio" id="female" value="女" v-model='sex'>女
</label>
<h2>您选择的性别是:{{sex}}</h2>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
message:'hello',
sex:'男'
// 选择的默认值,可为空
}
})
</script>
三、v-model:checkbox
单选框
<div id="app">
<!-- 添加label是为了选择文字时也可以选中复选框 -->
<label for="license">
<input type="checkbox" id="license" v-model='islicense'>同意协议
</label>
<h2>您选择的是:{{islicense}}</h2>
<button :disabled = '!islicense'>下一步</button>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
message:'hello',
islicense:false
}
})
</script>
多选框
<div id="app">
<input type="checkbox" value="互联网" v-model='arr'>互联网
<input type="checkbox" value="信息安全" v-model='arr'>信息安全
<input type="checkbox" value="软件" v-model='arr'>软件
<input type="checkbox" value="硬件" v-model='arr'>硬件
<h2>你选择了:{{arr}}</h2>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
message:'hello',
arr:[]
}
})
</script>
四、v-model:select
单选
<div id="app">
<select name="abc" id="" v-model='milktea'>
<option value="一点点">一点点</option>
<option value="coco">coco</option>
<option value="丸摩堂">丸摩堂</option>
<option value="茶颜悦色">茶颜悦色</option>
</select>
<h2>您选择的是:{{milktea}}</h2>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
milktea:'一点点'
}
})
</script>
多选
<div id="app">
<select name="abc" id="" v-model='milkteas' multiple>
<option value="一点点">一点点</option>
<option value="coco">coco</option>
<option value="丸摩堂">丸摩堂</option>
<option value="茶颜悦色">茶颜悦色</option>
</select>
<h2>您选择的是:{{milkteas}}</h2>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
milkteas:[]
}
})
</script>
五、值绑定
vue的值绑定用语言动态的给value绑定值,更好的接收可能来自服务器定义的值:
<div id="app">
<label v-for='itm in backtea' :for='itm'>
<input type="checkbox" :value = 'itm' :id = 'itm' v-model='milktea'>
{{itm}}
</label>
<h2>您选择的是:{{milktea}}</h2>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
milktea:[],
backtea:['一点点','coco','书亦烧仙草','丸摩堂']
}
})
</script>
六、修饰符
6.1 lazy
v-model默认是双向绑定数据的,一旦数据发生改变对应的data中的数据就会发生改变。
lazy修饰符可以让数据在失去焦点或者敲击回车时才改变
<input type="text" v-model.lazy="message">
<h2>{{message}}</h2>
6.2 number
默认情况下输入框中输入的字母和数字都会被当成字符串string进行处理。
使用number修饰符可以使输入的内容自动转换为数字类型。
<input type="text" v-model.number="message">
<h2>{{message}}--{{typeof message}}</h2>
6.3 trim
当用户输入很多空格时(浏览器可能会默认去除,但实际首尾会存在很多空格),
使用trim修饰符可以过滤左右两边的空格。
<input type="text" v-model.trim="message">
<h2>{{message}}</h2>