一、表单绑定 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" />