使用 watch 监听文本框数据的变化|学习笔记

简介: 快速学习使用 watch 监听文本框数据的变化

开发者学堂课程【Vue.js 入门与实战使用 watch 监听文本框数据的变化】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8205


使用 watch 监听文本框数据的变化


本节来换一个思路,也能实现文本框的数据变化:


一、范例:视觉效果图及代码展示

<body><div id="app">us2<input type="text" v-mode1="firstname">+<input type="text" v-model="lastname">=<input type="text" v-mode1="fullname"></div><script>

//创建vue实例,得到viewModelvar vm =new vue( {el: #app,data: {firstname :lastname:fullname : ''),methods: i,I

watch:{

//使用这个属性,可以监视  data 中指定数据的变化,然后触发这个 watch 中对应的 function 处理函数,就是指 date 上面所有的数据,都可以用 watch 来达到监视。

‘firstname’:function(newVal,oldVal){

//Console.log(‘监视到了 firstname 的变化’)

//This.fullname = this.firstname + ‘-’ +this.lastname

//Console.log(newVal + ‘---’ +oldVal)

This.fullname = newVal +’--’ + this.lastname

},

‘lastname’:function(newVal){

This.fullname = this.lastname +’-’+ newVal}

}

视觉效果图如下:

1666939804410.jpg

这就是使用 watch 监听来实现名称案例。

相关文章
|
NoSQL Linux 测试技术
Linux下Redis的安装、配置及开机自启动
Linux下Redis的安装、配置及开机自启动 系统版本: CentOS 7 Redis版本: Redis-6.2.5
46897 7
Linux下Redis的安装、配置及开机自启动
|
数据库
element多选框select下拉框数据回显的问题value.push is not a function
element多选框select下拉框数据回显的问题value.push is not a function
1275 1
|
数据采集 机器学习/深度学习 算法
Python实现LightGBM分类模型(LGBMClassifier算法)项目实战
Python实现LightGBM分类模型(LGBMClassifier算法)项目实战
|
NoSQL Linux Redis
在CentOS上安装和配置Redis
在CentOS上安装和配置Redis
2980 3
|
安全 关系型数据库 应用服务中间件
连接rds设置网络权限
连接阿里云RDS需关注:1) 设置白名单,允许特定IP访问;2) 选择合适网络类型,如VPC或经典网络;3) 确保VPC内路由与安全组规则正确;4) 同VPC内可使用内网地址连接;5) 可启用SSL/TLS加密增强安全性。记得遵循最小权限原则,确保数据库安全。不同服务商操作可能有差异,但基本流程相似。
630 9
|
设计模式 算法 搜索推荐
从策略模式看软件设计的智慧-灵活应对变化的艺术
策略模式是一种行为设计模式,它定义了算法族,分别封装起来,让它们之间可以互相替换,使得算法的变化独立于使用算法的客户。本文深入探讨了策略模式的组成、应用场景、实现方式及其优缺点。通过实际案例,展示了策略模式在灵活处理算法和业务规则变化中的强大作用。文章还提供了最佳实践和使用注意事项,帮助开发者更有效地运用策略模式,同时比较了与其他设计模式的异同。掌握策略模式,将为您的软件设计带来更高的灵活性和可维护性。
661 0
从策略模式看软件设计的智慧-灵活应对变化的艺术
|
前端开发 容器
教你快速上手Bootstrap框架(一)
教你快速上手Bootstrap框架
|
存储 安全 Java
settings.xml详解(很详细读这一篇就够了)
settings.xml是Java项目中用于配置Maven的重要文件,它详细规定了Maven的运行规则和行为。该文件通常位于用户家目录下的.m2文件夹中,或者项目根目录下的.mvn文件夹内。settings.xml中包含了众多配置项,从代理设置、镜像仓库配置,到服务器认证信息、插件组等,均可以在此文件中进行细致定义。通过合理配置settings.xml,我们可以优化Maven的依赖下载速度,保障仓库访问的安全性,甚至实现私有仓库的搭建与管理。深入了解settings.xml的每一项配置,对于提高Maven使用效率、保障项目构建稳定性具有重要意义。因此,无论是Maven初学者还是资深用户,都应仔
14604 4
|
关系型数据库 MySQL 数据库
【已解决】ERROR 1045 - Access denied for user ‘root‘@‘localhost‘ (using password: YES)
【已解决】ERROR 1045 - Access denied for user ‘root‘@‘localhost‘ (using password: YES)
|
SQL 关系型数据库 MySQL
MySQL写Shell方法总结
MySQL注入点,用工具对目标站点写入一句话shell,需要哪些前提条件?
523 1