Quelles sont les raisons pour lesquelles l'utilisation de v-show dans vuejs ne fonctionne pas ?

Cette fois, je vais vous expliquer les raisons pour lesquelles l'utilisation de v-show dans vuejs ne fonctionne pas. Quelles sont les précautions lors de l'utilisation de v-show dans vuejs. Prenons un cas pratique. regarde.

1. Description officielle du concept du site Web

v-if est un « vrai » rendu conditionnel, car il garantit que les écouteurs event et les composants enfants au sein du bloc conditionnel sont détruits et reconstruits de manière appropriée pendant le changement.

v-if est également paresseux. Si la condition est fausse lors du rendu initial, alors rien ne sera fait - le bloc conditionnel ne commencera pas le rendu tant que la condition n'est pas vraie pour la première fois. En comparaison, v-show est très simple. - - Quelles que soient les conditions initiales, l'élément sera toujours rendu et simplement commuté en fonction du CSS

. De manière générale, v-if a une surcharge de commutation plus élevée, tandis que v-show a une surcharge de rendu plus élevée. Par conséquent, si des commutations très fréquentes sont nécessaires, il est préférable d'utiliser v-show si les conditions d'exécution ne sont pas bonnes. changement, il vaut mieux utiliser v-if.

2. Résultats des entraînements

Extrait : Si vous utilisez v-if, la structure dom entière n'apparaîtra pas du tout sur la page. Si vous utilisez v-show, cela dépend des conditions suivantes. Si c'est vrai, cela sera affiché. , il sera ajouté sur style="<a href="http://www.php.cn/wiki/927.html" target="_blank">display<code>style=”<a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:none:none. ". Donc, si pour des choses importantes comme des composants, je pense personnellement qu'il est préférable d'utiliser v-if. S'il s'agit de quelque chose qui est temporairement masqué et qui sera affiché plus tard, v-show est plus pratique. En comparant v-style et v-show, v-show est équivalent au raccourci de v-style=”display:none” et v-style=”display:block".

1. Problème de v-show qui ne fonctionne pas

Récemment, j'utilisais vue_element-ui pour développer une application multipage et j'ai rencontré le problème que v-show ne fonctionnait pas

. a. Description du problème , comme indiqué ci-dessous (effet attendu), dans lequel les données du tableau changent dynamiquement, y compris le titre, qui changera également en fonction aux données du background. Si le titre renvoyé par le background est vide, le contenu de la colonne ne sera pas affiché. Sinon, toutes les données de la colonne seront affichées

. Ensuite, l'effet montré dans l'image ci-dessus apparaîtra, c'est-à-dire que v-show n'a pas réussi à masquer les données de la colonne avec la valeur du titre étant nulle

b.Solution :

Remplacez v-show par v-if pour obtenir l'effet de la figure 1.

c.Résumé (avis personnel) :

Étant donné que el-table-column générera des éléments d'étiquette multilignes, v-show ne prend pas en charge la syntaxe des modèles, on peut donc en déduire que v-show ne peut pas afficher ou masquer plusieurs éléments ? Cela peut être compris de cette façon, j'espère que Dieu pourra me le dire ! Donc dans ce cas, v-if ne peut être utilisé que pour y parvenir

. De plus, lors du rendu de plusieurs éléments, vous pouvez utiliser un élément

comme élément d'emballage et utiliser v-if dessus pour effectuer un

jugement conditionnel <template> Le rendu final n'inclura pas cet élément. en même temps, Ne prend pas en charge la syntaxe .v-show<template> Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur PHP. Site chinois !

Lecture recommandée :

Un résumé de ce que vous devez savoir pour améliorer Vue.js

Explication détaillée de vue propriétés calculées

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!