Dans cet article, examinons l'utilisation des commandes v-for, v-if et v-show . Ces trois commandes sont couramment utilisées. En passant, nous expliquerons une question d'entretien à haute fréquence: la différence entre v-if et v-show.
v-pour
v-for est très courant dans le développement commercial réel. Lorsque nous apprenons des langages de haut niveau, nous connaissons tous la boucle for . Grâce à la boucle, nous pouvons parcourir les groupes de données avec des spécifications de données similaires .
Pensons à un scénario commercial: dans le centre commercial, nous cliquons sur une catégorie de produits, et de nombreux produits avec des spécifications similaires seront rendus .
Si 20 ensembles de produits sont rendus, faut-il écrire 20 composants identiques? Les programmeurs ne doivent pas être aussi stupides.
Le contenu d'une fiche produit peut inclure des images, des noms, des prix, un inventaire et des descriptions de produits. Ces 20 produits sont tous ces champs, mais la valeur du champ est modifiée.
Donc, c'est ce que fait l'instruction v-for.
En utilisant v-for, nous pouvons utiliser un code de carte produit pour rendre des produits sans fin aussi longtemps que nous le voulons.
Parlons de la syntaxe de base:
<div id="app">
<ul>
<li v-for="item in items">
{
{item}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
items:[59,82,96,41,55,2,4,91,25],
},
});
</script>
C'est l' utilisation la plus basique de v-for . Les éléments et les éléments dans v-for peuvent être modifiés de manière arbitraire, mais les éléments doivent avoir le même nom que le tableau à rendre . Étant donné que le nom du tableau dans mes données est des éléments, j'écris également des éléments ici .
Jetons d'abord un coup d'œil à l'effet:
si nous voulons indexer , changez simplement le contenu de v-for en " (item, index) in items ".
<ul>
<li v-for="(item,index) in items">
索引:{
{index}},内容:{
{item}}
</li>
</ul>
Jetez un coup d'œil à l'effet:
dans certains scénarios d'entreprise, nous avons besoin de l'aide d'index.
Nous parlons du rendu ci-dessus du tableau , parlons des objets rendus .
<div id="app">
<ul>
<li v-for="item in Students">
{
{item.name}} - {
{item.age}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
Students:[
{
name:'Ray',
age:18
},
{
name:'Creator',
age:20
},
{
name:'Code',
age:3
}
]
},
</script>
Examinons d'abord le résultat:
la forme de code de l'objet de rendu est très similaire au tableau de rendu. Lorsque nous rendons le tableau, nous avons
seulement besoin d'écrire l'élément dans l' expression d'interpolation { {}}, mais lors du rendu de l'objet, nous avons besoin de {
{item.attribute}} , qui est en fait relativement simple. L'utilisation de l'index est la même que celle du tableau .
En raison de l'espace limité, nous ne citons qu'un tout petit exemple: les scénarios d'application de v-for sont très larges et peuvent optimiser beaucoup de code pour nous.
v-si
Comment contrôlons-nous si un composant est affiché ? En fait, il existe de nombreuses méthodes, mais le v-if fourni par vue est très facile à utiliser.
Le code de base est le suivant:
<div id="app">
<p v-if="msg">我被显示了</p>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:true
}
});
</script>
Nous avons écrit un v-if sur la balise p et lié une variable à msg. Dans les données, nous attribuons la valeur booléenne true à msg, donc, logiquement parlant, cette balise p sera affichée.
aucun problème.
L'utilisation de v-si est très simple , mais les scénarios d'application sont également très vaste . Nous pouvons gérer les valeurs des variables liées par v-si , dans de nombreux événements de méthode pour contrôler l'affichage et le masquage des composants . Cette instruction est très, très importante .
v-show
En parlant de v-show, sa fonction est la même que v-if. Mais ils sont fondamentalement différents, cette différence est souvent posée lors des entretiens.
Commençons par écrire son format de code de base:
<div id="app">
<p v-show="msg">我被显示了</p>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:true
}
});
</script>
Est-ce la même chose que v-if?
Mais regardons de plus près. Lorsque nous changeons la valeur de msg en false , ouvrez F12 et regardez le code.
Il n'y a en effet aucun contenu affiché sur la page. mais! ! ! Dans la structure DOM, la balise p a en fait été montée, mais la valeur de la propriété d'affichage CSS a été changée en aucune ! ! !
Nous utilisons la même opération pour examiner la structure DOM de v-if .
La balise p n'est pas montée sur le DOM ! ! !
C'est donc la différence la plus fondamentale entre v-if et v-show , frappez au tableau noir. Ce point de connaissance est extrêmement élevé dans certains entretiens de base .
V-if et v-show ont leurs propres scénarios d'application. Vous pouvez y réfléchir attentivement. En fonction de leurs caractéristiques, quand utiliser v-if et quand utiliser v-show. Cela vaut la peine d'y réfléchir.
Il existe une conception de cours de mini-programme WeChat, des besoins de conception complets, contactez le personnel QQ: 505417246
Suivez le compte officiel WeChat ci-dessous, vous pouvez recevoir l'applet WeChat, Vue, TypeScript, front-end, uni-app, full stack, Nodejs, Python et d'autres matériels d'apprentissage pratiques
