一、表单绑定 v-model ,双向绑定
v-model 指令实现表单元素和数据的双向绑定
<input type="text" v-model="message">
v-model 实现双向绑定的原理
<input type="text" :value="message" @input="message=$event.target.value">
v-model 其实是一个语法糖,它的背后本质上包含2个操作:
1. v-bind 绑定一个value属性
2. v-on 指令给当前元素绑定input事件
除了input,也可将v-model用于textarea元素
1. v-model 结合 radio
<div id="app"><label><input type="radio" value="男" v-model="sex">男</label><label><input type="radio" value="女" v-model="sex">女</label><h2>您选择的性别是:{{sex}}</h2></div><script src="./js/vue.js"></script><script>const app = new Vue({el: '#app',data: {message: '你好',sex: '男'}})</script>
2. v-model 结合 checkbox
checkbox 单选框应用(同意协议),单选框时对应布尔类型,绑定checked
<div id="app"><!-- checkbox单选框应用 --><label><input type="checkbox" v-model="isAgree">同意协议</label><h2>您选择的是:{{isAgree}}</h2><button :disabled="!isAgree">下一步</button></div><script src="./js/vue.js"></script><script>const app = new Vue({el: '#app',data: {message: '你好',isAgree: false}})</script>
checkbox 多选框应用,多选框时对应数组类型,绑定value
<div id="app"><!-- checkbox多选框应用 --><label><input type="checkbox" value="篮球" v-model="hobbies">篮球</label><label><input type="checkbox" value="足球" v-model="hobbies">足球</label><label><input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球</label><label><input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球</label><h2>您的爱好有:{{hobbies}}</h2></div><script src="./js/vue.js"></script><script>const app = new Vue({el: '#app',data: {hobbies: []}})</script>
3. v-model 结合 select
单选,对应字符串类型
<div id="app"><!-- 1.单选 --><select name="abc" v-model="fruit"><option value="苹果">苹果</option><option value="香蕉">香蕉</option><option value="西瓜">西瓜</option><option value="葡萄">葡萄</option></select><h2>您选择的水果是:{{fruit}}</h2></div><script src="./js/vue.js"></script><script>const app = new Vue({el: '#app',data: {fruit: '西瓜'}})</script>
多选,对应数组类型
<div id="app"><!-- 2.多选 --><select name="abc" v-model="fruits" multiple><option value="苹果">苹果</option><option value="香蕉">香蕉</option><option value="西瓜">西瓜</option><option value="葡萄">葡萄</option></select><h2>您选择的水果是:{{fruits}}</h2></div><script src="./js/vue.js"></script><script>const app = new Vue({el: '#app',data: {fruits: []}})</script>
二、值绑定
即动态地给value赋值(实际就是v-bind)
<div id="app"><!-- 值绑定 --><label v-for="item in originHobbies" :for="item"><input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}</label><h2>您的爱好有:{{hobbies}}</h2></div><script src="./js/vue.js"></script><script>const app = new Vue({el: '#app',data: {originHobbies: ['篮球', '足球', '羽毛球', '乒乓球', '高尔夫球'],hobbies: []}})</script>
三、v-model 修饰符
(1).lazy
v-model默认是在input事件中同步输入框的数据的。.lazy 可以让数据在失去焦点或者回车时才会更新
<input type="text" v-model.lazy="message">
(2).number
默认情况下,在输入框中无论我们输入的是字母还是数字,都会被当作字符串类型进行处理。.number 可以让在输入框中输入的内容自动转化成数字类型
<input type="number" v-model.number="age">
(3).trim
如果输入的内容首尾有很多空格,通常我们希望将其去除。.trim 可以过滤内容左右两边的空格
<input type="text" v-model.trim="name">
(4).native
监听组件根元素的原生事件
<!-- 组件不能直接监听点击,如果监听需要加.native --><back-top @click.native="backClick" />