Analyse de la liaison de classe et de style et du rendu conditionnel et de liste dans Vue

Cet article partage avec vous l'analyse de la liaison de classe et de style ainsi que le rendu des conditions et des listes dans Vue. Les amis dans le besoin peuvent s'y référer

Objectif :

1. <.>Maîtrise de diverses méthodes de liaison de classe et de style

2. Familier avec l'utilisation de v-if et v-for, ainsi que les précautions d'utilisation de v-if et v- pour ensemble

De nombreuses façons de lier la classe et le style

1. La classe et le style sont liés à l'aide de v-bind, c'est-à-dire :

2. Qu'il s'agisse d'une classe ou d'un style de liaison, il y a deux manières, l'une est un objet et l'autre est un tableau

3. class et :class sont. Coexistant

exemple de liaison

1.liaison d'objet de classe

    <!-- 根据isActivity的真假,判断是否应用activity这个class -->
    <p :class="{activity:isActivity}"></p>

2.liaison de tableau de classe

    <!-- 应用数组里面的class -->
    <p :class="[activity, activityOne]"></p>

3 Liaison d'objet .style

    <!-- 应用这个样式对象的样式 -->
    <p :style="styleObj"></p>  
    
    <script>
    ...
    //styleObj写在data里面
    data() {
        return {
            styleObj: {
                color: &#39;black&#39;
            }
        }
    }
    ...
    </script>

Liaison de tableau 4.style

    <!-- 应用这个数组里面的样式 -->
    <p :style="[styleObj,{fontSize:&#39;25px&#39;}]"></p>

Utilisation de v-if et v-for

Rendu conditionnel

1.v-if="expression", la valeur vraie ou fausse de l'expression détermine s'il faut la monter sur la page

     <p v-if="isTrue">这一段会在html里面,而且会显示出来</p>
     <p v-if="isFalse">这段不会在html里面,也不会显示出来</p>

2.v-show="expression" , la valeur vraie ou fausse de l'expression détermine si l'attribut d'affichage du nœud est none/block

     <p v-show="isTrue">display: block,会显示出来</p>
     <p v-show="isFalse">display: none,不会显示出来</p>

3. Différence : Les fonctions sont les mêmes, si le nœud est affiché, mais v-if fonctionnera dom, La page sera restitué

4. Pour v-if, il y a deux commandes : v-if-else et v-else, mais elles doivent être utilisées ensemble sans que rien d'autre ne les sépare. Règles d'utilisation Identiques à celles-ci. if..else instruction de js

Rendu de liste

1.v-pour de

     <li v-for="item of list">{{item}}</li>   //其中list为数组,item为数组元素
     <li v-for="(item,index) of list">{{index}}{{item}}</li>  //其中list为数组,index为索引(第一个0开始),item为数组元素

Objet de rendu de boucle

     //其中userInfo为对象, item为值, key为键, index为索引
     <li v-for="(item, key, index) of userInfo">{{item}}{{key}}{{index}}</li>

3. Généralement, une valeur clé sera ajoutée pour éviter toute influence mutuelle (la détection de la syntaxe le détectera. Après avoir ajouté la valeur clé, elles seront indépendantes les unes des autres, et les mêmes parties seront restituées et ne seront pas réutilisées)

     <li v-for="(item, index) of list" :key="index"></li>
   或<li v-for="(item, index) of list" :key="item.id"></li>

4.key et index sont facultatifs

Remarques sur l'utilisation de v-if et v-for ensemble

1.v-for a une priorité plus élevée que v -if. S'ils sont sur le même nœud, v-if sera exécuté à plusieurs reprises dans chaque boucle v-for

Autrement dit, v-for est exécuté en premier et v-if sera exécuté une fois pour chaque élément à venir. hors de v-for.

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

2. Si vous souhaitez d'abord exécuter v-if, puis déterminer si vous devez exécuter v-for, vous pouvez placer v-if sur l'élément externe (ou le modèle). ).

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>

Recommandations associées :

Analyse de la syntaxe du modèle de Vue, des propriétés calculées et des écouteurs

Analyse des instances de vue

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!