vue.js进行数据监听

在表单文本框写入文本时，将文本同步显示

数据监听.gif

实现此效果有多种方式。

事件监听方式

具体代码

keyup事件监听

watch监听

具体代码

watch会自动监听data中定义的数据

watch监听

computed计算属性

具体代码

当computed中用到的数据，有任何一个变动时，就会触发重新计算

computed计算属性

computed vs methods vs watch

  • computed 结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用

  • methods 表示一个具体的操作，主要用于写业务逻辑

  • watch 主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体

更多vue.js的有趣实例，请点击移步至目录

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • iOS工具和框架1
    1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,025评论 3赞 119
  • Vue.js 2.0 Official Guide Note
    这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容，还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,086评论 0赞 29
  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 135,099评论 19赞 139
  • 走
    戴着耳机 不播放音乐 也能一个人走很久
    鹿宁先森阅读 81评论 0赞 1
  • 周年祭妹儿
    开了这个令她无限眷恋的世界，离开了她无比牵挂的孩子。我的幸福感也随着她的离去几乎清于零。 y思念的根从她离去的那刻...
    竹林畔阅读 163评论 1赞 0