Obtenez des instructions Vue courantes en un seul geste

Cet article vous présentera en détail les instructions courantes de Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Insérer du texte :

v-text

est équivalent à l'attribut innerText de l'élément, qui doit être une double balise

Insertion de HTML :

équivaut à l'attribut innerHTML de l'élément

parcours de boucle

L'utilisation de v-for, en plus de l'attribut item , il existe d'autres attributs auxiliaires

 /* 在html中使用v-for指令进行渲染 */
/*
 普通数组
 */
  data:{
      list:[1,2,3,4,5,6]
   }
  <p v-for="(item,i) in list">--索引值--{{i}}   --每一项--{{item}}</p>

/*
 对象数组
 */
 data:{
      list:[1,2,3,4,5,6],
      listObj:[
        {id:1, name:&#39;zs1&#39;},
        {id:2, name:&#39;zs2&#39;},
        {id:3, name:&#39;zs3&#39;},
        {id:4, name:&#39;zs4&#39;},
        {id:5, name:&#39;zs5&#39;},
        {id:6, name:&#39;zs6&#39;},
      ]
}
   <p v-for="(user,i) in listObj">--id--{{user.id}}   --姓名--{{user.name}}</p>

/*
  对象
  */
  data:{
      user:{
        id:1,
        name:&#39;托尼.贾&#39;,
        gender:&#39;男&#39;
      }
 }
 <p v-for="(val,key) in user">--键是--{{key}}--值是--{{val}}</p>

/*
 数字
 <!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始-->
 */
<p v-for="count in 10">这是第{{count}}次循环</p>

Rendu conditionnel

v-if : s'il faut insérer des éléments

v-show s'il faut masquer les éléments et restituer les éléments selon CSS

Liaison d'attribut

v-bind : nom d'attribut = "constant|| nom de variable"

Forme abrégée : nom d'attribut="constant|| nom de variable"

<p v-bind:属性名="变量"></p>
//可以简写成
<p :属性名="变量"></p>

//如果要赋值常量，需要给常量用单引号包起来，如
<p :属性名=" &#39;常量&#39; "></p>

Liaison bidirectionnelle : v-model

La liaison dite bidirectionnelle signifie que si vous modifiez la valeur dans la couche de vue, la valeur correspondante dans vue changera également. Seuls les éléments dotés d'attributs de valeur peuvent être liés à des données bidirectionnelles.

Événement de liaison : v-on

v-on:click = "Nom de la méthode || Modifie directement les variables internes de la vue",

Forme abrégée : @click = " Méthode name|| Change directement la variable interne de la vue"

<p v-on:click=" num = 1 "></p>
//可以简写成
<p @click=" num = 1 "></p>

Ignorer le nœud de l'élément

v-pre : ignorer le processus de compilation de cet élément et de ses sous-éléments. Peut être utilisé pour afficher les balises Moustache originales. Sauter un grand nombre de nœuds sans instructions accélérera la compilation.

Rendu une seule fois

v-once : rendre les éléments et les composants une seule fois. Lors des rendus ultérieurs, l'élément/composant et tous ses enfants seront traités comme du contenu statique et ignorés. Cela peut être utilisé pour optimiser les performances de mise à jour.

Apprentissage recommandé : Tutoriel vue.js

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!