📗 1.クラスとスタイルのバインド

クラスとスタイル|Vueをバインドします。js

v-bind:class(v-bind:classの略)にオブジェクトを渡すことで、クラスを動的に切り替えることができます.

<div :class="{ active: isActive }"></div>

上記の構文表現アクティビティクラスの存在は、データ属性isActiveの真実性によって決まる.

key:value形式で複数可

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

バインドされたオブジェクトは行内を必要としない:

<div :class="classObject"></div>

data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}

同じ結果になります.オブジェクトを戻りオブジェクトのcomputed propertyにバインドすることもできます.これは通常強力なモードです.

data() {
  return {
    isActive: true,
    error: null
  }
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

配列構文
クラスリストを適用するには、

配列をclassに渡すことができます.

<div :class="[activeClass, errorClass]"></div>

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

バインドスタイル

📗 2.条件付きレンダリング

条件付きレンダリング|Vue。js
v-if
スクリーンは、

trueの場合のみレンダリングされます.

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

テンプレートタグ

divバインドを使用するのとは異なり、実際のDomツリーには影響しません.

v-ifなどの条件文を打つときに役立つ

トップクラステンプレートに適用しないでください.

v-show

接続されたデータが本物であれ偽物であれ、構造化レンダリングを行う.

ただし「display:none」が適用されている(虚偽の場合!)

条件付きレンダリング|Vue。js

<h1 v-show="ok">Hello!</h1>

両者の違いは  v-showを使用した要素は、常にレンダリングされ、DOMに保持されます.  v-show区域CSSのみ  display  属性のみを切り替えます.

v-show  <template>  エイリアスはサポートされていません.  v-elseと併用してはならない.

v-if  代.  v-show

v-if「リアル」条件レンダリングこれは、変換中にイベントリスナーとサブコンポーネントが条件ブロックで正しく削除され、再作成されるためです.

そして.  v-if 怠惰.初期レンダリングの場合、条件がfalseの場合は何も実行されません.条件ブロックは、条件が初めてTrue(True)になるまでレンダリングされません.

それに比べて  v-showずっと簡単.CSSベースの遷移は、初期条件を考慮せずに常にエンティティをレンダリングします.
(注:v-showは、まずDOMでレイヤーをレンダリングし、条件に応じてCSS display:block/display:noneプロパティを切り替えます.)

一般  v-if転換コストが高い、  v-show初期レンダリングコストが高い

だから常に変換する必要があるなら  v-show運転時条件が変わらなければ  使用v-ifより良い.

まずv-ifを使い、変換費用が高い(よく使う)ならv-showに変更!

📗 3.レンダリングリスト

:key一意に区別可能な値に設定します.

shortidパッケージインストール

npm i -D shortid

オブジェクト構造を用いて割当てを分解し、矢印関数を用いてコードを簡略化する.

アレイ変更の検出
レンダリングリスト|Vue。js
へんいほうしき

push():タイルの最後に値を追加

pop():ラストセール

shift():タイルの一番前に値を追加

unshift():平屋最前列

splice():インデックスを使用してデータを配置または削除

sort():並び順

reverse():反転配列.

コンソールを開き、変換方法を呼び出します.  items  配列として使用できます.例:  example1.items.push({ message: 'Baz' }) .
アレイの置換
レンダリングリスト|Vue。js
これにより、Vueは既存のDOMを放棄し、リスト全体を再表示する可能性があります.幸いなことに、事実はそうではない.Vueは、DOM要素を最大限に再利用するために、経験的または直感的に決定するのではなく、いくつかのインテリジェントな啓発的な方法を実施しているので、配列を重複するオブジェクトを含む他の配列に置き換えることは非常に有効である.