Vue でのクラスとスタイルのバインディングと条件付きおよびリストのレンダリングの分析-jsチュートリアル-php.cn

Vue でのクラスとスタイルのバインディングと条件付きおよびリストのレンダリングの分析

不言

リリース： 2018-07-17 16:41:37

オリジナル

2649 人が閲覧しました

この記事では、Vue でのクラスとスタイルのバインディングと条件とリストのレンダリングの分析を共有します。必要な友人は参照してください

目標:

クラスとスタイルのバインディングのさまざまな使用方法に習熟すること
v-if と v-for の使用法、および v-if と v-for を一緒に使用する場合の注意事項についてよく理解してください

クラスとスタイルをバインドするさまざまな方法

クラスとスタイルをバインドするそれらはすべてv-bind を使用します。つまり:
バインディングクラスであろうとスタイルであろうと、2つの方法があります。1つはオブジェクトであり、もう1つは配列です。
classと:classは共存します

Binding例

1.クラスオブジェクトバインディング

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

ログイン後にコピー

2.クラス配列バインディング

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

ログイン後にコピー

3.スタイルオブジェクトバインディング

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

ログイン後にコピー

4.スタイル配列バインディング

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

ログイン後にコピー

v-ifとv-forの使用法

条件付きレンダリング

1 .v-if="expression"、式の true または false の値により、ページにマウントするかどうかが決まります

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

ログイン後にコピー

2.v-show="expression"、式の true および false の値により、ノードの表示属性は none/block です

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

ログイン後にコピー

3. 違い: ノードが表示されるかどうかに関係なく機能は同じですが、v-if は dom を操作してページを再レンダリングします

4.v- if には、v-if-else と v-else の 2 つのコマンドがありますが、それらを分離するものは何もせずに一緒に使用する必要があります。使用規則は、js

リストのレンダリング

の if..else ステートメントと同じです。

1.v-for of

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

ログイン後にコピー

2. ループレンダリングオブジェクト

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

ログイン後にコピー

3. 通常、相互影響を避けるためにキー値が追加されます (構文検出によりこれが検出されます。キー値を追加した後、それらは区別されます)相互に独立しており、同じ部分も再レンダリングされ、再利用されません)

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

ログイン後にコピー

4.keyとindexはオプションです

v-ifとv-forを一緒に使用する際の注意点

1.v -for は v-if High よりも優先度が高く、それらが同じノード上にある場合、v-if は各 v-for ループで繰り返し実行されます
つまり、v-for が最初に実行され、v-if が実行されます。 v-for から出てくる項目ごとに 1 回実行されます。

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

ログイン後にコピー

2. 最初に v-if を実行してから v-for を実行するかどうかを決定したい場合は、v-if を外側の要素に配置できます (またはテンプレート).

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

ログイン後にコピー