vue通过v-model,@input, @v-model.lazy几种输入框数据更新方式的区别
2019-04-16 10:57
267 查看
在使用v-model时,如果用中文输入法输入中文,一般在没有选定词组前,也就在拼音阶段,Vue是不会更新数据的,当敲下汉字时才会触发更新。如果希望总是实时更新,可以用@input来代替v-model.
<div id="app"> <input type="text" v-model.lazy="message" placeholder="请输入"> <p>输入的内容是:{{ message }}</p> <input type="text" @input="handleInput" placeholder="请输入"> <p>输入的内容是:{{ message1 }}</p> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message:'', message1:'' },methods:{ handleInput:function(e){ this.message1 = e.target.value //原生的DOM事件 } } }) </script>
而v-model也有修饰符,.lazy会转变为在change事件中同步,这时。message并不是实时改变,而是在失去焦点和按回车时才会更新
相关文章推荐
- CheckboxSelectionModel 几种获取值的方式,以及record数据通过combo来转换
- vue.js通过自定义指令实现数据拉取更新的实现方法
- 表单向服务器提交数据有几种方式?这些方式有什么区别?
- Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
- angularjs 在指令中通过dom修改input 的Value值同时更新model
- vue的style绑定background-image的方式和其他变量数据的区别详解
- 关于Entity Framework更新的几种方式以及可能遇到的问题(附加类型“Model”的实体失败,因为相同类型的其他实体已具有相同的主键值)在使用 "Attach" 方法或者将实体的状态设置为 "Unchanged" 或 "Modified" 时如果图形中的任何实体具有冲突键值,则可能会发生上述行为
- 关于ElasticSearch中更新数据的几种方式
- Vue通过input筛选数据
- vue中父子组件通过props传递数据,页面加载完毕,父组件数据更新,子组件不动态更新的解决方案
- 不通过getElementByName实现获取表单数据 (document.form表单的name值.input输入框的name值)
- Vue某些情况下 v-model绑定数据不实时更新解决办法
- Kettle中通过触发器方式实现数据 增量更新
- MVC4.0中ViewBag、ViewData、TempData和ViewModel几种传值方式的区别
- 为什么 vue.js存在某些情况下 v-model绑定数据不实时更新呢?
- VUE-Table上绑定Input通过render实现双向绑定数据
- vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
- html中input不可用或是只读的几种方式和区别
- java 数据绑定的几种方式及相关注意事项-持续更新
- vue-cli input输入框 enter键或失去焦点传数据