[Vue]クラスとスタイルをバインド|レンダリング
📗 1.クラスとスタイルのバインド
クラスとスタイル|Vueをバインドします。js
<div :class="{ active: isActive }"></div>
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>
<div :class="classObject"></div>
data() {
return {
classObject: {
active: true,
'text-danger': false
}
}
}
data() {
return {
isActive: true,
error: null
}
},
computed: {
classObject() {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
配列構文クラスリストを適用するには、
<div :class="[activeClass, errorClass]"></div>
data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
}
}

バインドスタイル

📗 2.条件付きレンダリング
条件付きレンダリング|Vue。js
v-if
スクリーンは、
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

テンプレートタグ

v-show
<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
一意に区別可能な値に設定します.
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要素を最大限に再利用するために、経験的または直感的に決定するのではなく、いくつかのインテリジェントな啓発的な方法を実施しているので、配列を重複するオブジェクトを含む他の配列に置き換えることは非常に有効である.

Reference
この問題について([Vue]クラスとスタイルをバインド|レンダリング), 我々は、より多くの情報をここで見つけました https://velog.io/@topgeun7913/Vue-Vue-기초문법-클래스와-스타일바인딩-렌더링テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol