本記事でわかること
- dataで定義したデータを表示する方法
- v-forを使う方法を知 りたい
v-forの記述方法
今回はliをv-forで回します。
pug(html)の記述はこれだけでOK！
ul
li(v-for="list in lists" :key="index")
環境とバージョンについて
- mac OS 11.2.3
- エディタ VSCode
- node v14.8.0
Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org - npm 6.14.7
npmwww.npmjs.com
全体のコード
今回は簡単配列を用意して、v-forを使って表示する方法について解説します。
headerのナビゲーションをイメージしてデータを作成していきます。
まずは全体のコードを見ていきましょう。
pug
nav
ul
li(v-for="(list, index) in lists" :key="index")
p(v-html="list.txt")
vue
export default {
data() {
return {
lists: [
{ txt: 'Home'},
{ txt: 'Product'},
{ txt: 'About'},
{ txt: 'Store'},
],
}
},
}
記述については上記で終わりです。
pugの記述量が減る上に、v-forを使っているので、記述がとてもシンプルですね。
今回はデータが4つしかないので、かなり記述量が減ったとは言い難いですが、普通にhtmlを書くよりかは遥かに記述量は少ないですね。
li(v-for="(list, index) in lists" :key="index")
vueで用意した、listsの配列に入ったデータをv-forで回すようにしています。
v-forのイメージとしては、単数形 in 複数形みたいな使い方がいいかなと思います。
なので,lists（複数形）という配列をlist（単数形）を使って各要素に渡していくようにします。
単数形でなくても動くので実際はなんでもいいです。短く「ｌ」だけでも動きます。
ただ、単数形 in 複数形のなんとなくわかりやすので、僕はこの書き方をしているだけです。
あとは表示したい要素にデータを渡して上げるだけです。
p(v-html="list.txt")
これだけでOK！
表示は下記のようになります。
データの個数分出るようにでてきます。
ul
li
p(v-html="list.txt")
li
p(v-html="list.txt")
li
p(v-html="list.txt")
li
p(v-html="list.txt")
li
p(v-html="list.txt")
複数のデータを扱う方法
簡単なリストなら上記のような記述方法で対応できるが、リンクを付けたいなどなった場合、
配列の中にリンクを追加してあげるだけで対応できます。
pug
nav
ul
li(v-for="(list, index) in lists" :key="index")
a(:href="list.link")
p(v-html="list.txt")
linkというデータにリンクを追加します。あとはテキストを表示させたのと同じように、記述をするだけです。このとき、気をつけないと行けないのがリンクということです。
リンクをデータから渡す場合はバインドする必要があるので、hrefの前に「：」をつけて上げましょう。
これでうまくリンクが追加できます。
vue
export default {
data() {
return {
lists: [
{ txt: 'Home', link: '/home' },
{ txt: 'Product', link: "/product" },
{ txt: 'About', link: '/about' },
{ txt: 'Store', link: '/store' },
],
}
},
}
コメント