目次
条件付きレンダリング
次のように使用します。
<スクリプトの 設定>
import { computed , reactive } from 'vue' ;
const 詩 =リアクティブ({
タイトル: 『古詩集』、
著者： 「李尚音」、
詩_李白: [
「歌う月はさまよい、踊る影は混沌としている。' , ' そして、白い鹿と緑の崖の間に置きました。』、『海峡の両側の猿たちは泣き止まない、そして軽船は一万山を越えた。'
]、
詩_LiShangying: [
『昨夜の星と昨夜の風、絵画館の西側と亀塘の東側。' , 'ジンセには理由もなく50の文字列があり、新年について考えるために1つの文字列と1つの列があります。' 、'なぜ一緒に西の窓のろうそくを切るのですが、バシャンの雨の夜のことを話しましょう。'
】
})
//著者の名前が李白かどうかを判定する
const isLiBai =計算(() => {
返詩の 作者=== '李白'
})
</script>
<テンプレート>
<h1> { {詩.タイトル }} - { {詩.著者 }} (結合) </h1><br>
<span v-if =" isLiBai " > { {詩. 詩_李白 }} </span>
<span v-else > { {詩. 詩_LiShangying }} </span>
</テンプレート>
上記のコードで実現される機能は、作者名がLi Baiの場合はpoem_LiBaiの内容を表示し、それ以外の場合はpoem_LiShangyingの内容を表示し、実行結果は次のようになります。
v-else 要素は v-if 要素または v-else-if 要素の後に続く必要があることに注意してください。そうしないと、次のことが発生します。
Vショーとの違い
要素を条件付きで表示するために使用できるもう 1 つのコマンドは v-show です。この 2 つの違いは次のとおりです。
V_ショー:
v-if の条件が false の場合、この要素は表示されません。v-show は、条件が true か false に関係なくこの要素を表示しますが、条件が false の場合、v-show は表示プロパティを切り替えます。要素を非表示にするには、この要素を none に設定します。
リストのレンダリング
リストのレンダリングには v-for を使用します。次のように使用します。
<スクリプトの 設定>
import { computed , reactive } from 'vue' ;
const 詩 =リアクティブ({
タイトル: 『古詩集』、
著者： 「李尚音」、
詩_LiShangying: [
『昨夜の星と昨夜の風、絵画館の西側と亀塘の東側。' , 'ジンセには理由もなく50の文字列があり、新年について考えるために1つの文字列と1つの列があります。' 、'なぜ一緒に西の窓のろうそくを切るのですが、バシャンの雨の夜のことを話しましょう。'
】
})
</script>
<テンプレート>
<h1> { {詩.タイトル }} - { {詩.著者 }} (結合) </h1><br>
< li v-for = "詩の項目 .poem_LiShangying " >
{ {アイテム }}
</li>
</テンプレート>
上記のコードは、 v-for を使用して、poem .poem_LiShangyingの配列を走査し、各 li タグ内の配列項目を表示します。
操作の結果は次のようになります。
同時に、v-for にはオプションの 2 番目のパラメーターがあり、現在の項目の位置インデックスを示し、開始値は 0 です。上記の例の場合、次のように記述できます。
<h1> { {詩.タイトル }} - { {詩.著者 }} (結合) </h1><br>
<li v-for = " ( item , index )の 詩.poem_LiShangying " >
{ {インデックス }} 、 { {アイテム }}
</li>
操作の結果は次のようになります。
in in o(*￣▽￣*)bv-for は of で置き換えることができます。
v-for を使用して、オブジェクトのすべてのプロパティをトラバースすることもできます。このとき、vue は、次のコードのように、プロパティ名を示す 2 番目のパラメーターを提供し、3 番目の位置はインデックスを示します。
<li v-for = "( item , key , Index )詩の " >
{ {キー }} :
{ {インデックス }} 、 { {アイテム }}
</li>
操作の結果は次のようになります。
v-for は整数を受け取ることもできます。次に例を示します。
<li v-for =" num in 6 " > { { num }} </li>
結果は次のとおりです。
このとき、n の値は 1 から始まることに注意してください。！
v-for と v-if がノード上に同時に存在する場合、v-if の方が v-for よりも優先されます。これは、v-if の条件が v-for 内で定義された変数エイリアスにアクセスできないことを意味します。
<li v-for = "(項目,インデックス)詩 .poem_LiShangying " v-if = "項目.長さ ! = 0 " >
{ {キー }} :
{ {インデックス }} 、 { {アイテム }}
</li>
エラーメッセージ：
この競合を解決するには、それらを異なるレイヤーに配置するだけです。
<li v-for = " ( item , index )の 詩.poem_LiShangying " >
<span v-if =" item . length != 0 " >
{ {インデックス }} 、 { {アイテム }}
</スパン>
</li>