3番目のレッスンでは、条件付きレンダリングについて説明します。何らかの条件が満たされた場合にのみページに何かを表示する方法。
→ Vue.js初心者レッスン1：インスタンスVue
→初心者向けVue.js、レッスン2：バインディング属性
→ Vue.js初心者レッスン3：条件付きレンダリング
→ Vue.js初心者レッスン4：リストレンダリング
→ Vue .js初心者向けレッスン5：イベント処理
→ Vue.js初心者向けレッスン6：クラスとスタイルのバインド
→ Vue.js初心者向けレッスン7：計算されたプロパティ
→ Vue.js初心者向けレッスン8：コンポーネント
レッスンの目的
製品の在庫があるかどうかを訪問者に知らせる製品カードの碑文が必要です。製品の在庫がある場合は、碑文を表示する必要があります
In Stock。在庫がない場合-碑文Out of Stock。特定の碑文を表示するかどうかの決定は、アプリケーションに保存されているデータに基づいて行う必要があります。
初期コード
これが私たちが始めるコードです。いつものように、ファイル
index.html内、タグ内にあります<body>：
<div id="app">
<div class="product">
<div class="product-image">
<img :src="image" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</div>
このファイル
main.jsでは、Vueインスタンスを設定するときに、次のデータオブジェクトが使用されます。
data: {
product: "Socks",
image: "./assets/vmSocks-green.jpg",
inStock: true
}
data新しいプロパティが
オブジェクトに追加されていることに注意してください。これは、inStockブール値を保持するプロパティですtrue。
仕事
Webアプリケーションを開発する場合、特定の条件を満たすことによっては、要素をページに表示する必要があることがよくあります。たとえば、アイテムの在庫がなくなった場合は、アイテムカードでそのことを通知する必要があります。
対応するメッセージは要素として発行される予定
<p>です。これは、どこかにindex.html次の要素があることを意味します。
<p>In Stock</p>
<p>Out of Stock</p>
私たちの仕事は、商品が在庫にある場合に一方を撤回し、商品が在庫にない場合にもう一方を撤回することです。
問題の解決策
Vueでは、この問題の解決策は単純明快に見えます。
すでにご存知のように
main.js、在庫のある商品の有無を示すデータは、オブジェクトの、に記述されていますdata。
inStock: true
どの要素
<p>をレンダリングするかをシステムに指示するために、v-ifandディレクティブを使用できますv-else。これは、index.html以下が該当することを意味します。
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
に
inStock真の値が含まれている場合、最初の項目が出力され<p>ます。それ以外の場合は、2番目の項目が表示されます。この場合inStock、値はで書き込まれるtrueため、表示されますIn Stock。
当社は、株式に株式を持っている。
素晴らしいです！条件付きレンダリングを使用して製品の詳細を表示しました。問題を解決しました。しかし、そこで止まらず、条件付きレンダリングの調査を続けましょう。
V-else-ifディレクティブ
ガイドラインに基づいて、条件付きのレンダリングのための私たちのメカニズム
v-ifとはv-else、論理の別のレベルを追加することによって拡張することができます。これは、ディレクティブを使用して実行できますv-else-if。これを示すために、例を少し複雑にしましょう。
のオブジェクトに
data、main.js商品の数量に関する情報があるとします。それらはプロパティに保存されますinventory：
inventory: 100
引用符で囲まれたJavaScript式を使用してこのプロパティを分析することにより、ページの訪問者により正確な製品情報を提供できます。
<p v-if="inventory > 10">In stock</p>
<p v-else-if="inventory <= 10 && inventory > 0">Almost sold out!</p>
<p v-else>Out of stock</p>
この状況では
<p>、対応する式がtrueであることが判明したため、最初の要素がページに表示されます。
V-showディレクティブ
ページの特定の要素を頻繁に非表示にして表示する必要がある場合は、このメカニズムを実装するには、ディレクティブを確認するのが理にかなっていることを意味します
v-show。このようなディレクティブを持つ要素は常にDOMに存在しますが、ディレクティブに渡された条件がtrueであることが判明した場合にのみ表示されます。実際、このディレクティブの使用のおかげで、CSSプロパティが条件によって要素に適用されるという事実について話していますdisplay: none。
この方法では
v-if、とを使用してアイテムを管理するよりもパフォーマンスが向上しますv-else。
このディレクティブのアプリケーションは次のようになります。
<p v-show="inStock">In Stock</p>
ディレクティブ
v-ifとが使用された問題の解決策は、私たちv-elseに適しています。したがって、私たちはそれに焦点を合わせ、何も変更しません。
ワークショップ
データオブジェクトにプロパティを追加します
onSale。<span>テキストを表示しOn Sale、訪問者に販売について通知する要素のレンダリングを制御するために使用する必要があります。
これは、この問題を解決するために使用できるテンプレートです。
これが問題の解決策です。
結果
今日は、Vueを使用した条件付きレンダリングについて学びました。つまり、それは次のことについてでした：
- 要素を条件付きでレンダリングできるVueディレクティブがあります。
- v-if
- v-else-if
- v-else
- v-show
- ディレクティブを操作するときは、引用符で渡されるJavaScript式を使用できます。
- ディレクティブに引用符で渡された式がtrueの場合、項目が出力されます。
- ディレクティブ
v-showは要素の可視性にのみ影響し、要素をDOMに挿入したり、要素をDOMから削除したりすることはありません。
Vueとの知り合いを始めて、このフレームワークの助けを借りてすでに解決することを計画している問題がありますか？
→ Vue.js初心者レッスン1：インスタンスVue
→初心者向けVue.js、レッスン2：バインディング属性
→ Vue.js初心者レッスン3：条件付きレンダリング
→ Vue.js初心者レッスン4：リストレンダリング
→ Vue .js初心者向けレッスン5：イベント処理
→ Vue.js初心者向けレッスン6：クラスとスタイルのバインド
→ Vue.js初心者向けレッスン7：計算されたプロパティ
→ Vue.js初心者向けレッスン8：コンポーネント
