Vue监听器简单使用及注意事项说明
更新时间：2024年08月15日 09:30:47 作者：专注写bug
这篇文章主要介绍了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中的方法名必须与实际变量名称保值一致，否则会出现无法侦听的问题。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
大家都知道vue-router有两种模式，hash模式和history模式，带＃的则是hash模式。接下来给大家带来了Vue 去除路径中的＃号的解决方法，感兴趣的朋友一起看看吧2018-04-04
vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决
这篇文章主要介绍了vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
通过实例解析chrome如何在mac环境中安装vue-devtools插件
这篇文章主要介绍了通过实例解析chrome如何在mac环境中安装vue-devtools插件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
这篇文章主要介绍了在antd4.0中Form使用initialValue操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要为大家介绍了vue组件生命周期钩子使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪2022-04-04
这篇文章给大家介绍了element表格数据模糊的实现代码,文中有详细的效果展示和实现代码供大家参考,具有一定的参考价值,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了使用vue3搭建后台系统的过程记录,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
Vue 实现 Tab切换实现的场景很多，比如，利用vue-router、利用第三方插件、利用组件等等.本文使用组件来实践tab选项卡2017-03-03
这篇文章主要介绍了Vue3如何解决Element-plus不生效的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue中transition的使用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
最新评论