Maison  >  Article  >  interface Web  >  Comment changer l'affichage et le masquage de l'élément actuel dans vue

Comment changer l'affichage et le masquage de l'élément actuel dans vue

亚连
亚连original
2018-06-07 11:23:001817parcourir

Ci-dessous, je partagerai avec vous une méthode d'implémentation pour modifier l'affichage, le masquage ou le statut de l'élément actuellement sélectionné dans Vue. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Dans vue, ce n'est plus comme jq d'opérer directement dom. Si vous souhaitez pointer vers l'élément actuellement sélectionné, vous ne pouvez plus utiliser l'idée de jq. La méthode est la suivante :

Lorsque vous pointez sur un état, seul l'état pointé est masqué et les autres éléments restent inchangés. Si element-ui est utilisé dans le projet, l'opération sera plus simple.

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

En js :

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

L'idée de cette méthode est : La souris pointe sur quelque chose Lors de la sélection d'un élément, l'identifiant d'un élément est obtenu et stocké dans une variable. Jugez row.id==currentId et contrôlez l'affichage et le masquage de ce bouton, car l'identifiant du courant. L'élément ne peut être obtenu que lorsque la souris pointe sur un élément, vous pouvez donc utiliser row.id==currentId pour juger, afin de pouvoir facilement contrôler les modifications de l'élément actuel

Ce qui précède est ce que j'ai. compilé pour tout le monde, j'espère qu'il sera utile à tout le monde à l'avenir.

Articles associés :

Cliquez sur le numéro de page pour modifier le contenu de la page dans la pagination dans vue.js

Dans le composant vue2.0 Comment implémenter la transmission de valeurs et la communication

Nouvelles fonctionnalités de la version webpack 4.0.0-beta.0 (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn