Web Front-end
JS Tutorial
How to implement changes in watch monitoring objects and corresponding values in vue
How to implement changes in watch monitoring objects and corresponding values in vue
Below I will share with you a detailed explanation of the changes in vue watch monitoring objects and corresponding values. It has a good reference value and I hope it will be helpful to everyone.
is as follows:
var vm=new Vue({
data:{
a:1,
b:{
c:1
}
},
watch:{
a(val, oldVal){//普通的watch监听
console.log("a: "+val, oldVal);
},
b:{//深度监听，可监听到对象、数组的变化
handler(val, oldVal){
console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的
},
deep:true
}
}
})
vm.a=2
vm.b.c=2a is an ordinary value, when a will be monitored when the value of b changes. b is an object and cannot be written directly like a. In-depth monitoring is required to capture it. However, when I wanted to capture the change of a certain value in the b object, I found that the two printed The values are different, as shown in the figure:
In this way, you can only know that the object has changed but not which specific value has changed. If you want to monitor a certain value of the object Changes can be made by using the calculated attribute computed
var vm=new Vue({
data:{
b:{
c:1
}
},
watch:{
newValue(val, oldVal){
console.log("b.c: "+val, oldVal);
}
},
computed: {
newValue() {
return this.b.c
}
}
})
vm.b.c=2Use watch to monitor the computed value and you can directly know which corresponding value has changed. The result is as shown in the figure :
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Simple web server function example implemented by nodejs
Project created by vue-cli, with many configurations Page implementation method
Nodejs simple method of accessing and operating mysql database example
The above is the detailed content of How to implement changes in watch monitoring objects and corresponding values in vue. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Users encounter rare glitches: Samsung Watch smartwatches suddenly experience white screen issues
Apr 03, 2024 am 08:13 AM
You may have encountered the problem of green lines appearing on the screen of your smartphone. Even if you have never seen it, you must have seen related pictures on the Internet. So, have you ever encountered a situation where the smart watch screen turns white? On April 2, CNMO learned from foreign media that a Reddit user shared a picture on the social platform, showing the screen of the Samsung Watch series smart watches turning white. The user wrote: "I was charging when I left, and when I came back, it was like this. I tried to restart, but the screen was still like this during the restart process." Samsung Watch smart watch screen turned white. The Reddit user did not specify the smart watch. Specific model. However, judging from the picture, it should be Samsung Watch5. Previously, another Reddit user also reported
Convert an array or object to a JSON string using PHP's json_encode() function
Nov 03, 2023 pm 03:30 PM
JSON (JavaScriptObjectNotation) is a lightweight data exchange format that has become a common format for data exchange between web applications. PHP's json_encode() function can convert an array or object into a JSON string. This article will introduce how to use PHP's json_encode() function, including syntax, parameters, return values, and specific examples. Syntax The syntax of the json_encode() function is as follows: st
Monitor iframe scrolling behavior
Feb 18, 2024 pm 08:40 PM
How to monitor the scrolling of an iframe requires specific code examples. When we use the iframe tag to embed other web pages in a web page, sometimes we need to perform some specific operations on the content in the iframe. One of the common needs is to listen for the scroll event of the iframe so that the corresponding code can be executed when the scroll occurs. The following will introduce how to use JavaScript to monitor the scrolling of an iframe, and provide specific code examples for reference. Get the iframe element First, we need
Use Python's __contains__() function to define the containment operation of an object
Aug 22, 2023 pm 04:23 PM
Use Python's __contains__() function to define the containment operation of an object. Python is a concise and powerful programming language that provides many powerful features to handle various types of data. One of them is to implement the containment operation of objects by defining the __contains__() function. This article will introduce how to use the __contains__() function to define the containment operation of an object, and give some sample code. The __contains__() function is Pytho
How to convert MySQL query result array to object?
Apr 29, 2024 pm 01:09 PM
Here's how to convert a MySQL query result array into an object: Create an empty object array. Loop through the resulting array and create a new object for each row. Use a foreach loop to assign the key-value pairs of each row to the corresponding properties of the new object. Adds a new object to the object array. Close the database connection.
How to open Control Center on Apple Watch in watchOS 10
Sep 20, 2023 pm 02:17 PM
How to Access Control Center in watchOS 10 The way we interact with our watches has remained more or less the same since Apple launched the first Apple Watch. Even after adding so many new features, the overall user interface remains consistent. But watchOS10 brings big changes! On an Apple Watch running watchOS 9 or earlier, you can quickly open Control Center by swiping up on the screen. However, with the update to watchOS 10, the swipe-up gesture pulls up a whole new smart stack of widgets instead of Control Center. So the big question is how to open the Control Center on Apple Watch in WatchOS10. The answer is as follows:
How do PHP functions return objects?
Apr 10, 2024 pm 03:18 PM
PHP functions can encapsulate data into a custom structure by returning an object using a return statement followed by an object instance. Syntax: functionget_object():object{}. This allows creating objects with custom properties and methods and processing data in the form of objects.
Use Python's __le__() function to define a less than or equal comparison of two objects
Aug 21, 2023 pm 09:29 PM
Title: Using Python's __le__() function to define a less than or equal comparison of two objects In Python, we can define comparison operations between objects by using special methods. One of them is the __le__() function, which is used to define less than or equal comparisons. The __le__() function is a magic method in Python and is a special function used to implement the "less than or equal" operation. When we compare two objects using the less than or equal operator (<=), Python
