Vue双向数据绑定:v-model指令
2020-03-10 00:02
267 查看
简介
v-model 指令是在表单控件元素上创建双向数据绑定,它会根据控件类型自动选取正确的方法来更新元素。
双向数据绑定也可以简单理解为:当后端数据发生改变时,前端页面也会自动改变;数据通过修改前端页面的时候,后端的数据内容也会随之发生改变。
组件内部双向数据绑定
1、在实例的data中,设置demo的起始内容
new Vue({ el: '#box', data: { title: 'hello world', demo: 'this is a demo' } })
2、用v-model实现双向绑定,在input输入框里的内容会实时改变
中的内容。<input v-model="demo"/> <div>{{demo}}</div>
v-model修饰符
v-model修饰符,主要有‘.lazy’、‘.number’和‘.trim’。
- .lazy:默认情况下,‘v-model’在‘input’事件中同步输入框的值与数据,但添加了.lazy修饰符之后,从而转变为在‘change’事件中同步。简单点说就是延迟了
- .number:如果想自动将用户的输入值转换为’Number‘类型(如果原值的转换结果为‘NaN’则返回原值),可以添加.number修饰符给’v-model‘来处理输入值
- .trim:如果要自动过滤用户输入的首尾空格,可以添加.trim修饰符给’v-model‘上过滤输入
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 5-Vue指令之双向数据绑定 V-model
- vue.js使用v-model指令实现的数据双向绑定功能示例
- VUE v-model表单数据双向绑定完整示例
- Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
- vue教程1-01 v-model 一般表单元素(input) 双向数据绑定
- Vue 双向数据绑定 V-model 通常配合input 使用
- 关于vue2.2.0创建自定义组件v-model双向绑定数据
- Vue.js第一天学习笔记(数据的双向绑定、常用指令)
- vue 双向数据绑定( v-model和:model的区别 )
- vue中关于checkbox数据绑定v-model指令的个人理解
- vue.js v-model数据双向绑定实例
- 聊聊 Vue 的双向数据绑定,Model 如何改变 View,View 又是如何改变 Model 的
- 初探Vue原理之view-model的数据动态双向绑定
- vue 是如何实现视图与viewmodel的双向绑定的?为什么数据一变化,视图就会立即更新,视图产生用户操作,viewmodel就能马上得知
- Vue.js第一天学习笔记(数据的双向绑定、常用指令)
- vue自定v-model实现表单数据双向绑定问题
- vue 数据双向绑定 v-model
- vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
- Vue.js之视图和数据的双向绑定(v-model)
- VUE指令-数据绑定v-model