当前位置: 首页 > news >正文

Vue——监听器简单使用与注意事项

文章目录

  • 前言
  • 编写简单demo
  • 注意事项

前言

监听器,在官网中称为侦听器,个人还是喜欢称之为监听器。官方文档如下:

vue 官网 侦听器

编写简单demo

侦听器在项目中通常用于监听某个属性变量值的变化,并根据该变化做出一些处理操作。最简单的案例如下所示:

<template><h1>侦听器</h1><p>{{ msg }}</p><button @click="changeMsgHandler">点击一下  就送屠龙宝刀</button>
</template>
<script>
export default{data(){return{msg:"专注写 bug"}},methods:{changeMsgHandler(){var newMessage = this.msg.split('').reverse().join('');this.msg = newMessage;}},// 侦听器watch:{// 监听器的名称必须与被监听的属性名称保持一致msg(newVal,oldVal){console.log("newVal===>"+newVal);console.log("oldVal===>"+oldVal);}}
}
</script>

页面初次加载时,页面中显示效果如下所示:
在这里插入图片描述
当按钮点击后,页面与控制台中的信息如下所示:
在这里插入图片描述

注意事项

对某个变量进行侦听变化时,需要使用到watch选项。

侦听器watch中的方法名必须与实际变量名称保值一致,否则会出现无法侦听的问题。
在这里插入图片描述

http://www.lryc.cn/news/365428.html

相关文章:

  • OpenCV的“画笔”功能
  • uniapp封装picker选择器组件,支持关键字查询
  • 智慧城市的规划与实施:科技引领城市运行效率新飞跃
  • Linux——内存管理代码分析
  • 手机自动化测试:4.通过appium inspector 获取相关app的信息,以某团为例,点击,搜索,获取数据等。
  • 个人项目———密码锁的实现
  • 关于Input【type=number】可以输入e问题及解决方案
  • zabbix“专家坐诊”第241期问答
  • 了解Kubernetes-RKE2的PKI以及证书存放位置
  • 利用大语言模型进行事实匹配
  • 【Stable Diffusion】(基础篇一)—— Stable Diffusion的安装
  • 维纳运动的概念
  • 毫秒级查询性能优化实践!Apache Doris 在极越汽车数字化运营和营销方向的解决方案
  • vllm 大模型量化微调推理使用: lora、gptq、awq
  • WPS/Office(Word、Excel、PPT) 自动测评方法
  • ArrayList——简单洗牌算法
  • springboot vue 开源 会员收银系统 (6) 收银台的搭建
  • 重排和重绘的区别,什么情况下会触发这两种情况
  • 亮点回顾|智能汽车芯片创新技术应用与质量研讨会
  • 特征工程,减小过拟合
  • STM32-16-ADC
  • 单例模式(C语言)
  • js前端格式化日期函数
  • 五个超实用的 ChatGPT-4o 提示词
  • 基于51单片机多功能防盗报警proteus仿真( proteus仿真+程序+设计报告+原理图+讲解视频)
  • gitee和github的协同
  • 压力测试-性能指标-Jmeter使用-压力测试报告
  • 通过Slf4j中的MDC实现在日志中添加用户IP功能
  • 代码随想录算法训练营第四十九天| 139.单词拆分、背包问题总结
  • STM32F103VE和STM32F407VE的引脚布局