1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Vue-05-v-model 双向绑定

Vue-05-v-model 双向绑定

时间:2023-07-11 12:29:05

相关推荐

Vue-05-v-model 双向绑定

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。