Vue watch使用详解
这次给大家带来Vue watch使用详解，Vue watch使用的注意事项有哪些，下面就是实战案例，一起来看一下。
watch本身很容易理解, watch负责将视图中的数据与某个函数关联起来
当Vue视图中的数据变化时, 关联的函数会被执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监听方法watch的使用</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<p id="root"></p>
<script>
var vm = new Vue({
el: "#root",
data: { obj: {name: "zhaoolee", age: 12} , tel:6666666},
template: `<p><p>姓名: {{obj.name}}</p>
<p>电话: {{tel}}</p>
<input type="text" v-model="obj.name">
<input type="text" v-model="tel"></p>`,
watch: {
obj: {
handler(){
console.log("obj被改变");
},
// 页面加载之初先执行一次handle
immediate: true,
// 深度检查属性,即使对象内部的属性值改变, 也能检测到(比较消耗性能)
deep: true
},
"obj.name": {
handler(){
console.log("=>obj.name被改变");
}
},
tel:{
handler(){
console.log("tel被改变");
}
}
}
})
</script>
</body>
</html>对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。在实例化时为每个键调用 $watch() ;
//使用官方vue-cli脚手架书写
<template>
//观察数据为字符串或数组
<input v-model="example0"/>
<input v-model="example1"/>
/当单观察数据examples2为对象时，如果键值发生变化，为了监听到数据变化，需要添加deep:true参数
<input v-model="example2.inner0"/>
</template>
<script>
export default {
data(){
return {
example0:"",
example1:"",
example2:{
inner0:1,
innner1:2
}
}
},
watch:{
example0(curVal,oldVal){
console.log(curVal,oldVal);
},
example1:'a'，//值可以为methods的方法名
example2:{
//注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
handler(curVal,oldVal){
conosle.log(curVal,oldVal)
},
deep:true
}
},
methods:{
a(curVal,oldVal){
conosle.log(curVal,oldVal)
}
}
}
</script>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是Vue watch使用详解的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
用户遭遇罕见故障 三星 Watch 智能手表突现白屏问题
Apr 03, 2024 am 08:13 AM
你可能遇到过智能手机屏幕出现绿色线条的问题，即使没见过，也一定在网络上看到过相关图片。那么，智能手表屏幕变白的情况你遇见过吗？4月2日，CNMO从外媒了解到，一名Reddit用户在社交平台上分享了一张图片，展示了三星Watch系列智能手表屏幕变白的情况。该用户写道："我离开时正在充电，回来时就这样了，我尝试重启，但重启过程中屏幕还是这样。"三星Watch智能手表屏幕变白这位Reddit用户并未指明这款智能手表的具体型号。不过，从图片上看，应该是三星Watch5。此前，另一位Reddit用户也报告
crystaldiskmark是什么软件？-crystaldiskmark如何使用？
Mar 18, 2024 pm 02:58 PM
CrystalDiskMark是一款适用于硬盘的小型HDD基准测试工具，可以快速测量顺序和随机读/写速度。接下来就让小编为大家介绍一下CrystalDiskMark，以及crystaldiskmark如何使用吧~一、CrystalDiskMark介绍CrystalDiskMark是一款广泛使用的磁盘性能测试工具，用于评估机械硬盘和固态硬盘（SSD）的读写速度和随机I/O性能。它是一款免费的Windows应用程序，并提供用户友好的界面和各种测试模式来评估硬盘驱动器性能的不同方面，并被广泛用于硬件评
foobar2000怎么下载？-foobar2000怎么使用
Mar 18, 2024 am 10:58 AM
foobar2000是一款能随时收听音乐资源的软件，各种音乐无损音质带给你，增强版本的音乐播放器，让你得到更全更舒适的音乐体验，它的设计理念是将电脑端的高级音频播放器移植到手机上，提供更加便捷高效的音乐播放体验，界面设计简洁明了易于使用它采用了极简的设计风格，没有过多的装饰和繁琐的操作能够快速上手，同时还支持多种皮肤和主题，根据自己的喜好进行个性化设置，打造专属的音乐播放器支持多种音频格式的播放，它还支持音频增益功能根据自己的听力情况调整音量大小，避免过大的音量对听力造成损害。接下来就让小编为大
BTCC教学：如何在BTCC交易所绑定使用MetaMask钱包？
Apr 26, 2024 am 09:40 AM
MetaMask（中文也叫小狐狸钱包）是一款免费的、广受好评的加密钱包软件。目前，BTCC已支持绑定MetaMask钱包，绑定后可使用MetaMask钱包进行快速登入，储值、买币等，且首次绑定还可获得20USDT体验金。在BTCCMetaMask钱包教学中，我们将详细介绍如何注册和使用MetaMask，以及如何在BTCC绑定并使用小狐狸钱包。MetaMask钱包是什么？MetaMask小狐狸钱包拥有超过3,000万用户，是当今最受欢迎的加密货币钱包之一。它可免费使用，可作为扩充功能安装在网络
网易邮箱大师怎么用
Mar 27, 2024 pm 05:32 PM
网易邮箱，作为中国网民广泛使用的一种电子邮箱，一直以来以其稳定、高效的服务赢得了用户的信赖。而网易邮箱大师，则是专为手机用户打造的邮箱软件，它极大地简化了邮件的收发流程，让我们的邮件处理变得更加便捷。那么网易邮箱大师该如何使用，具体又有哪些功能呢，下文中本站小编将为大家带来详细的内容介绍，希望能帮助到大家！首先，您可以在手机应用商店搜索并下载网易邮箱大师应用。在应用宝或百度手机助手中搜索“网易邮箱大师”，然后按照提示进行安装即可。下载安装完成后，我们打开网易邮箱账号并进行登录，登录界面如下图所示
百度网盘app怎么用
Mar 27, 2024 pm 06:46 PM
在如今云存储已经成为我们日常生活和工作中不可或缺的一部分。百度网盘作为国内领先的云存储服务之一，凭借其强大的存储功能、高效的传输速度以及便捷的操作体验，赢得了广大用户的青睐。而且无论你是想要备份重要文件、分享资料，还是在线观看视频、听取音乐，百度网盘都能满足你的需求。但是很多用户们可能对百度网盘app的具体使用方法还不了解，那么这篇教程就将为大家详细介绍百度网盘app如何使用，还有疑惑的用户们就快来跟着本文详细了解一下吧！百度云网盘怎么用：一、安装首先，下载并安装百度云软件时，请选择自定义安装选
Win11管理员权限获取详解
Mar 08, 2024 pm 03:06 PM
Windows操作系统是全球最流行的操作系统之一，其新版本Win11备受瞩目。在Win11系统中，管理员权限的获取是一个重要的操作，管理员权限可以让用户对系统进行更多的操作和设置。本文将详细介绍在Win11系统中如何获取管理员权限，以及如何有效地管理权限。在Win11系统中，管理员权限分为本地管理员和域管理员两种。本地管理员是指具有对本地计算机的完全管理权限
如何使用迅雷下载磁力链接
Feb 25, 2024 pm 12:51 PM
随着网络技术的迅猛发展，我们的生活也得到了极大的便利，其中之一就是能够通过网络下载和分享各种资源。而在下载资源的过程中，磁力链接成为了一种非常常见和方便的下载方式。那么，迅雷磁力链接又是如何使用的呢？下面，我将给大家详细介绍一下。迅雷是一款非常流行的下载工具，它支持多种下载方式，其中包括磁力链接。磁力链接可以理解为一种下载地址，通过它我们可以获取到资源的相关
