How to change the display and hiding of the current item in vue

Below I will share with you an implementation method of changing the display, hiding or status of the selected current item in vue. It has a good reference value and I hope it will be helpful to everyone.

In vue, it is no longer like jq to directly operate dom. 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)"

In js:

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

The idea of ​​​​this method is: When the mouse points to an item, Obtain the id of a certain item and store it in a variable. Judge row.id==currentId and control the display and hiding of this button. Because the id of the current item can only be obtained when the mouse points to a certain item, so you can use row.id==currentId to judge, so that you can easily control the changes of the current item

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

Related articles:

Implementing paging in vue.js by clicking the page number to replace the page content

In the vue2.0 component How to implement value passing and communication

New features of webpack 4.0.0-beta.0 version (detailed tutorial)

The above is the detailed content of How to change the display and hiding of the current item in vue. For more information, please follow other related articles on the PHP Chinese website!