Home Web Front-end JS Tutorial vue2.0 method to implement page navigation prompt guidance

vue2.0 method to implement page navigation prompt guidance

May 30, 2018 pm 03:31 PM
navigation hint

Below I will share with you an article on how to implement page navigation prompt guidance in vue2.0. It has a good reference value and I hope it will be helpful to everyone.

When users perform some new operation processes, it is also necessary to provide some navigation processes. The project is implemented using iview's dialog box.

demo:

  <Modal v-if="modalOFF === 1">
  <p>这里是对话框一</p>
  <button @click="modalOFF = 2"></button>
  </Modal>
  <Modal v-if="modalOFF === 2">
  <p>这里是对话框二</p>
  <button @click="modalOFF = 3"></button>
  </Modal>
  <Modal v-if="modalOFF === 3">
  <p>这里是对话框二</p>
  <button @click="modalOFF = null"></button>
  </Modal>
Copy after login

js code:

让谁先显示,就在data中定义modalOFF的属性值。默认是
 modalOFF: 1,
Copy after login

When modalOFF is null, the dialog box disappears.

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

Related articles:

JS implements the method of generating QR codes from links and converting them into images

Vue implements dynamics Methods of creating and deleting data

Detailed explanation based on vue2.0 dynamic components and render

The above is the detailed content of vue2.0 method to implement page navigation prompt guidance. 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)

What should I do if Google Chrome prompts that the content of this tab is being shared? What should I do if Google Chrome prompts that the content of this tab is being shared? Mar 13, 2024 pm 05:00 PM

What should I do if Google Chrome prompts that the content of this tab is being shared? When we use Google Chrome to open a new tab, we sometimes encounter a prompt that the content of this tab is being shared. So what is going on? Let this site provide users with a detailed introduction to the problem of Google Chrome prompting that the content of this tab is being shared. Google Chrome prompts that the content of this tab is being shared. Solution: 1. Open Google Chrome. You can see three dots in the upper right corner of the browser "Customize and control Google Chrome". Click the icon with the mouse to change the icon. 2. After clicking, the menu window of Google Chrome will pop up below, and the mouse will move to "More Tools"

Try new ringtones and text tones: Experience the latest sound alerts on iPhone in iOS 17 Try new ringtones and text tones: Experience the latest sound alerts on iPhone in iOS 17 Oct 12, 2023 pm 11:41 PM

In iOS 17, Apple has overhauled its entire selection of ringtones and text tones, offering more than 20 new sounds that can be used for calls, text messages, alarms, and more. Here's how to see them. Many new ringtones are longer and sound more modern than older ringtones. They include arpeggio, broken, canopy, cabin, chirp, dawn, departure, dolop, journey, kettle, mercury, galaxy, quad, radial, scavenger, seedling, shelter, sprinkle, steps, story time , tease, tilt, unfold and valley. Reflection remains the default ringtone option. There are also 10+ new text tones available for incoming text messages, voicemails, incoming mail alerts, reminder alerts, and more. To access new ringtones and text tones, first, make sure your iPhone

What is the horizontal figure 8 on the navigation map? What is the horizontal figure 8 on the navigation map? Jun 27, 2023 am 11:43 AM

The horizontal figure 8 on the navigation map means haze, moderate is a yellow 8 warning signal, and severe is an orange 8 warning signal.

Baidu Maps App latest version 18.8.0 released, introducing traffic light radar function for the first time and adding real-time parking recommendation function Baidu Maps App latest version 18.8.0 released, introducing traffic light radar function for the first time and adding real-time parking recommendation function Aug 06, 2023 pm 06:05 PM

Both Android and iOS versions of Baidu Map App have released version 18.8.0, which introduces the traffic light radar function for the first time, leading the industry. According to the official introduction, after turning on the traffic light radar, it supports automatic detection of traffic lights while driving without having to enter a destination. Beidou High-Precision can position in real time. , 1 million+ traffic lights across the country automatically trigger green wave reminders. In addition, the new function also provides full silent navigation, making the map area more concise, key information clear at a glance, and no voice broadcast, allowing the driver to focus more on driving. Baidu Maps will launch a traffic light countdown function in October 2020, supporting real-time countdown prediction. Judgment, the navigation will automatically display the remaining seconds of the countdown when approaching a traffic light intersection, allowing users to always grasp the road conditions ahead. Traffic light countdown to December 31, 2022

How to handle user input checksum prompts in Vue How to handle user input checksum prompts in Vue Oct 15, 2023 am 10:10 AM

How to handle the verification and prompts of user input in Vue. Handling the verification and prompts of user input in Vue is a common requirement in front-end development. This article will introduce some common techniques and specific code examples to help developers better handle user input verification and prompts. Validation using computed properties In Vue, you can use computed properties to monitor and validate user input. You can define a calculated attribute to represent the value entered by the user, and perform validation logic in the calculated attribute. Here is an example: data(){

Which navigation software is the football navigation voice package in? Which navigation software is the football navigation voice package in? Nov 09, 2022 pm 04:33 PM

The football navigation voice package in the "Amap Navigation" software is one of the navigation voice packages for the car version of the Amap map. The content is the navigation voice of Huang Jianxiang's football commentary version. Setting method: 1. Open the Amap software; 2. Click to enter the "More Tools" - "Navigation Voice" option; 3. Find "Huang Jianxiang Passionate Voice" and click "Download"; 4. On the pop-up page, click " Just use voice".

Baidu Tieba app prompts that the operation is too frequent, what's the matter? Baidu Tieba app prompts that the operation is too frequent, what's the matter? Apr 01, 2024 pm 05:06 PM

Baidu Tieba app prompts that the operation is too frequent. This prompt is usually to maintain the normal operation and user experience of the platform to prevent malicious screen spam, advertising spam and other inappropriate behaviors. For specific handling methods, you can read the tutorial shared by the editor. Baidu Tieba app prompts that the operation is too frequent. Sharing how to deal with it 1. When the system prompts [Operation is too frequent], we need to wait for a while. If you are anxious, you can do something else first. Generally, after waiting for a while, this prompt message will It will disappear automatically and we can use it normally. 2. If after waiting for a long time, it still displays [Operation Too Frequent], we can try to go to Tieba Emergency Bar, Tieba Feedback Bar and other official Tieba, post to report this phenomenon and ask official personnel to solve it. 3.

Amap launches upgraded version of driving ETA service: real-time analysis of current road conditions and more accurate estimated arrival time Amap launches upgraded version of driving ETA service: real-time analysis of current road conditions and more accurate estimated arrival time Apr 30, 2024 am 08:37 AM

According to news from this site on April 29, Amap officially announced the launch of an upgraded version of driving ETA (Note from this site: ETA is the estimated time of arrival, which refers to the estimated time it will take for the user to depart from the current moment and follow a given route to the destination. ) service, which aims to help users make more accurate route planning duration and traffic condition estimates, and assist users in making travel decisions. This map application is the latest upgraded Amap App. It introduces the "ultra-large-scale graph convolutional neural network model", which can better capture and learn traffic flow patterns, support urban road networks and highway systems, and can Accurately depict the spatiotemporal dynamic changes of traffic conditions. In addition, the new version of the map further integrates the iTransformer time series prediction model to support real-time analysis.

See all articles