Home Web Front-end JS Tutorial watch listens for routing changes and watch listening objects (detailed tutorial)

watch listens for routing changes and watch listening objects (detailed tutorial)

Jun 04, 2018 pm 04:15 PM
watch Variety monitor

Below I will share with you an example of using watch to monitor routing changes and watch monitoring objects. It has a good reference value and I hope it will be helpful to everyone.

1. Watch to monitor routing changes

Solution:

export default{
data(){
return{}
},
watch:{
"$route":"getPath" // 监听事件
},
methods:{
getPath(){
let path = this.$roune.path; //或得当前路径
进行逻辑判断
}
}
}
Copy after login

2. Watch monitoring object

Example:

<el-select v-model="form.region" placeholder="请选择">
   <el-option
     v-for="item in rootCategory" :key="item.id"
     :label="item.name"
     :value="item.id">
   </el-option>
</el-select>
export default{
data(){
return{ 
form:{ 
region:""
}
}
},
watch:{
&#39;form.region&#39;:function(newValue,oldValue){
console.info(newValue);
console.info(oldValue);
}
}
}
Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

p5.js introductory tutorial ball animation sample code

Angularjs Promise instance detailed explanation

Detailed explanation of the five methods of exporting Excel using JS


##

The above is the detailed content of watch listens for routing changes and watch listening objects (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Users encounter rare glitches: Samsung Watch smartwatches suddenly experience white screen issues 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

How vue3 data monitors watch/watchEffect How vue3 data monitors watch/watchEffect May 12, 2023 pm 06:31 PM

We all know that the function of the listener is to trigger every time the reactive state changes. In the combined API, we can use the watch() function and watchEffect() function. When you change the reactive state, it may be triggered at the same time. Trigger Vue component updates and listener callbacks. By default, user-created listener callbacks will be called before the Vue component is updated. This means that the DOM you access in the listener callback will be the state it was in before it was updated by Vue. So, let’s take a look, how can we make good use of them? What's the difference between them? The watch() function watch needs to listen to a specific data source, such as listening to a ref. The first parameter of watch can be

Monitor iframe scrolling behavior 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

How to use watch in Vue to monitor changes in an array How to use watch in Vue to monitor changes in an array Jun 11, 2023 am 10:54 AM

How to use watch in Vue to monitor array changes. Vue is one of the most widely used frameworks in front-end development. It provides many convenient ways to implement functions such as data responsiveness, template rendering, and componentization. In Vue, we often use watch to monitor data changes. However, when we need to monitor array changes, we need to pay attention to some details. In Vue, we can use watch to monitor changes in a single property or object. The basic usage is as follows: watch:{

How to open Control Center on Apple Watch in watchOS 10 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:

What is the implementation principle of Vue3 listener watch What is the implementation principle of Vue3 listener watch Jun 04, 2023 pm 02:05 PM

The essence of watch The essence of watch is to observe a responsive data and notify and execute the corresponding callback function when the data changes. In fact, the essence of watch implementation is to use the effect and options.scheduler options. As shown in the following example: //The watch function receives two parameters, source is the responsive data, and cb is the callback function functionwatch(source,cb){effect(//Trigger the read operation to establish the connection ()=>source.foo ,{scheduler(){//When the data changes, call the callback function cbcb()}})} as shown in the above code

Vue component communication: using watch and computed for data monitoring Vue component communication: using watch and computed for data monitoring Jul 10, 2023 am 09:21 AM

Vue component communication: using watch and computed for data monitoring Vue.js is a popular JavaScript framework, and its core idea is componentization. In a Vue application, data needs to be transferred and communicated between different components. In this article, we will introduce how to use Vue's watch and computed to monitor and respond to data. watch In Vue, watch is an option, which can be used to monitor the changes of one or more properties.

How to change your Apple Watch How to change your Apple Watch Aug 23, 2023 pm 07:37 PM

What you'll need: A new Apple Watch band A clean, soft cloth A flat, well-lit workspace Steps to change your Apple Watch band: 1. Remove the current band: Before you begin, place your Apple Watch face down on a clean, soft cloth to prevent the dial from being scratched. Press and hold the strap release button located on the back of the watch. The pusher is a small oval, flush with the watch body, where the two strap components join. While holding this button, slide the band over to remove it. You may need to apply a little force, but it should slide out relatively easily. Remember to remove both parts of the band. 2. Match the new band to your Apple Watch: Before installing the new band, make sure it matches your

See all articles