初心者向け。v-forディレクティブの色んなタグでの使い方
1118 回閲覧されました
みなさんこんにちは、jonioです。
少し期間を開けるとv-forディレクティブの使い方を忘れるのですがそんな私やこれからvue.jsを勉強する人のための情報です。
vue.jsでコーディングをする場合とりあえずv-forディレクティブが使えれば何とかなります。
難易度は高くなくjQueryが多少理解できれば大丈夫です。
例えばhtmlでliタグを使う時は↓みたいにします。
liタグの中に表示したい内容を直接書きます。
しかしvue.jsでは liタグの中に直接書きません。（場合によっては書きます、私は繰り返しで表示したい内容が3つ以上なかったら直接書きます）
↓にします。
使い方の説明をします。
繰り返しをしたい内容にv-for=”〜”を付けます（今だと4行目）がv-for=”hogehoge in hugahuga”とします。（hogehogeとhugahugaは何でもいいです）
分かりやすい名前がいいので私はitem in itemsとしています。
そしてv-for=”hogehoge in hugahuga”の下に必ず:key=”hogehoge.id”（5行目）をつけてください、つけないとエラーになります。
これはそんなもんだと思っていいです。
4行目と5行目のhogehogeを同じにしてください。
そして表示するための内容をdata属性に書きます。（18行目〜34行目）
18行目から34行目の書き方はそのまま覚えていいです。
5行目と18行目のitemsですが同じ名前にしてください。
items:[ ]の中にオブジェクトの形で書きます。（オブジェクトの意味が分からない人はこんな書き方をすると思えばいいです）
そして表示したい内容を8行目に書きます、「{{item.li}}」です。
item.liのitemは6行目のitemと同じ名前にしてitem.liのliは20、23、26、29、32行目のliと同じです。
これで1つの内容を繰り返で表示するのはできましたが次はブロック（タイトル、内容を繰り返で表示するとか）で表示する方法の解説をします。
使用例
例えば↓みたいにブロック（日付、お知らせ、内容）を繰り返しで表示したかったとします。（例なのでスタイルの解説はしません）
そんな場合はコードを↓にします。
やり方は簡単で{{information.〜}}の「〜」を増やせばいいだけです。
画像の読み込み
今度は↓のように画像を読み込みたかったとします。
その場合はコードを↓にします。
23、29行目で赤枠の中の図を表示していて26、32行目で青枠の中の図を表示しています。
画像を表示するときのコードは「:src=”hogehoge.hugahuga”」みたいにすればいいです。
リンクの付け方
リンクをつける時はコードを↓にしますが画像の時とコードの書き方はほとんど同じです。
4行目の「:href=”hogehoge.hugahuga”」とすればいいです。
3行目は別タブで開くための設定です。
vue.jsは繰り返で表示するための記述はやり方が決まっている感じなので何回か書くと勝手に覚えていると思います。