vue.js进行数据监听

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

数据监听.gif

实现此效果有多种方式。

事件监听方式

具体代码

keyup事件监听

watch监听

具体代码

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

watch监听

computed计算属性

具体代码

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

computed计算属性

computed vs methods vs watch

  • computed 结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用
  • methods 表示一个具体的操作,主要用于写业务逻辑
  • watch 主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是computedmethods的结合体

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大前端开发

微信小程序新增拖动组件:movable-view

小程序在520节日前夜,让程序员们又躁动了一把,更新了一些很诱人的功能,如内容转发API,iBeacon API,振动API,屏幕亮度调节API等,也增强了地图...

18940
来自专栏编程

AngularJS的数据绑定功能展示

在AJAX型的单页应用普及之前,类似Rails、PHP和JSP之类的平台都可以帮助我们创建用户界面(UI),它们会把HTML字符串和数据混合起来,然后再发送给用...

22080
来自专栏云飞学编程

Python大牛带你一节课开发一个自定义翻译网站

涉及知识点: web前端模板应用,模板语言应用 web后端开发,数据库入库,查询 爬虫开发,cookie保持,js加密 推荐下小编的Python学习群54211...

11120
来自专栏BestSDK

开发微信小程序,必知的40个小技巧

微信小程序开发者和开发需求者必读的40条技巧分享: Q:为什么脚本内不能使用window等对象 A:页面的脚本逻辑是在JsCore中运行,JsCore是一个没有...

66130
来自专栏河湾欢儿的专栏

性能优化

11810
来自专栏极乐技术社区

极乐问答No.2 | 微信小程序开发40问

导语 微信小程序开发者和开发需求者必读,内容涵盖小程序开发实战需要注意的40个技术点,供大家参考: ? 问答 Q Q1:为什么脚本内不能使用window等对象 ...

32580
来自专栏娱乐心理测试

40条微信小程序技巧分享

23030
来自专栏Debian社区

Tmux 快速教程:快捷键和配置

Tmux 简单来说就是终端里的『窗口管理器』,如果我使用终端登录到远程主机并运行前台程序,那么这个窗口等于就被占用了,想要看一下 CPU 的使用率,就得再连接一...

48320
来自专栏随心DevOps

[多图] DevOps 也要懂点 Excel

本文涉及一些简单的 Excel 的操作,效果拔群 ---- 步骤: 获取 Docker 版本,并生成一个 csv 文件 导入 CSV 到 Excel 并简单清洗...

37360
来自专栏Jerry的SAP技术分享

CRM WebClient UI的浏览器打印实现

WebClient UI上自带了一个打印按钮,按Ctrl + P后可以生成一个新的页面供打印。

42030

扫码关注云+社区

领取腾讯云代金券