Home Web Front-end JS Tutorial vue changes the state of the currently selected item

vue changes the state of the currently selected item

Apr 12, 2018 pm 05:20 PM
state

This time I will bring you the status of vue to change the currently selected item. What are the notes for vue to change the status of the currently selected item? The following is a practical case. Get up and take a look.

In vue, it is no longer possible to directly operate dom like jq. If you want to point to the currently selected item, you can no longer use jq's idea. The method is as follows:

When pointing to a state, only the pointed state is hidden, and other items remain unchanged. If element-ui is used in the project, the operation will be simpler. Set it like this:

v-if="(row.id == currentId&&row.auditState==0)?checkState:!checkState" @mouseover="statehidden(row.id)"
Copy after login

js:

statehidden(id){
   this.currentId=id; 
  },
Copy after login

The idea of ​​this method is: When the mouse points to an item, the id of the item is obtained and stored in a variable, and it is judged that row.id== currentId, just control the display and hiding of this button, because the id of the current item can only be obtained when the mouse points to an item, so you can use row.id==currentId to judge, so that you can Easily control the changes of the current item

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the use of vue better-scroll's scrolling plug-in

How to use the mint-ui time plug-in Get the selection value

The above is the detailed content of vue changes the state of the currently selected item. 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)

Hot Topics

Java Tutorial
1658
14
PHP Tutorial
1257
29
C# Tutorial
1231
24
Connection status in standby: Disconnected, reason: NIC Compliance Connection status in standby: Disconnected, reason: NIC Compliance Feb 19, 2024 pm 03:15 PM

"The connection status in the event log message shows Standby: Disconnected due to NIC compliance. This means that the system is in standby mode and the network interface card (NIC) has been disconnected. Although this is usually a network issue , but can also be caused by software and hardware conflicts. In the following discussion, we will explore how to solve this problem." What is the reason for standby connection disconnection? NIC compliance? If you see the "ConnectivityStatusinStandby:DisConnected,Reason:NICCompliance" message in Windows Event Viewer, this indicates that there may be a problem with your NIC or network interface controller. This situation is usually

How to set Momo status How to set Momo status Mar 01, 2024 pm 12:10 PM

Momo, a well-known social platform, provides users with a wealth of functional services for their daily social interactions. On Momo, users can easily share their life status, make friends, chat, etc. Among them, the setting status function allows users to show their current mood and status to others, thereby attracting more people's attention and communication. So how to set your own Momo status? The following will give you a detailed introduction! How to set status on Momo? 1. Open Momo, click More in the lower right corner, find and click Daily Status. 2. Select the status. 3. The setting status will be displayed.

How to show up offline on WhatsApp on Android phone How to show up offline on WhatsApp on Android phone Jul 14, 2023 am 08:21 AM

Want to appear "offline" or don't want to share your current status with your friends on WhatsApp? There is a simple but clever trick to do this. You can adjust your WhatsApp settings so that your current status (offline or last seen) is not visible to your friends or others there. How to show offline status on your WhatsApp status bar? This is a very simple and streamlined process. So, follow the steps below now. Step 1 – Open WhatsApp on your phone. Step 2 – Tap ⋮ and choose to open Settings. Step 3 – Open Privacy settings to access it. Step 4 – On that privacy page, open the “Last Viewed & Online” setting to access it. Step 5 – Change the “Who can

How to check server status How to check server status Oct 09, 2023 am 10:10 AM

Methods to view server status include command line tools, graphical interface tools, monitoring tools, log files, and remote management tools. Detailed introduction: 1. Use command line tools. On Linux or Unix servers, you can use command line tools to view the status of the server; 2. Use graphical interface tools. For server operating systems with graphical interfaces, you can use the graphics provided by the system. Use interface tools to view server status; 3. Use monitoring tools. You can use special monitoring tools to monitor server status in real time, etc.

Detailed explanation of the five states of Java threads and state transition rules Detailed explanation of the five states of Java threads and state transition rules Feb 19, 2024 pm 05:03 PM

In-depth understanding of the five states of Java threads and their conversion rules 1. Introduction to the five states of threads In Java, the life cycle of a thread can be divided into five different states, including new state (NEW), ready state (RUNNABLE), Running status (RUNNING), blocking status (BLOCKED) and termination status (TERMINATED). New state (NEW): When the thread object is created, it is in the new state. At this point, the thread object has allocated enough resources to perform the task

Learn about printer offline status Learn about printer offline status Jan 04, 2024 am 10:29 AM

When we see the printer is offline on our computer, sometimes we may not know what it means. In fact, this means that the printer is not connected. What does offline status of the printer mean? Answer: Offline status means that the printer is not connected. The possible reason is that the printer is not turned on or is not connected normally. Solution to printer offline status: Rewrite the content without When changing the original meaning, you need to change the language to Chinese, and the original sentence does not need to appear. 1. First, make sure your printer is turned on normally, if not, turn it on. Use another method: 1. If your printer is already turned on, you can first enter the "Control Panel" and then click the "View Devices and Printers" option. 3. Next, select your printer and click "View what is currently being printed." "most

Introduction and principle analysis of PHP stateless Introduction and principle analysis of PHP stateless Mar 06, 2024 pm 02:57 PM

Introduction and Principle Analysis of PHP Stateless In Web development, statelessness is an important concept. It means that the server does not save any client state information when processing client requests. Each request is independent and Does not depend on previous requests. PHP, as a commonly used server-side scripting language, also supports stateless features. This article will introduce the concept and principles of PHP statelessness, and analyze it through specific code examples. The concept of stateless means that the server does not save any information when processing client requests.

Excellent explanation: Does Dubbo already support Go language? Excellent explanation: Does Dubbo already support Go language? Mar 25, 2024 am 09:42 AM

Dear readers, today we will provide you with an article discussing Dubbo’s Go language. As an excellent distributed service framework, Dubbo has been widely used and supported in the Java language. With the rapid development of Go language in recent years, many developers have become keenly interested in whether Dubbo already supports Go language. This article will elaborate on Dubbo’s support for the Go language, specific implementation methods, and code examples. I hope it can help

See all articles