【Javascript勉強中】Vue.jsの列記を横並びにして項目間に読点とか三角印▶とか入れたいとき

きのこ図鑑を作りたくて、JSの勉強しながらやってます。

理想のきのこ図鑑は成長の過程ごとのフォルムの違いが分かるようになってるといいといいです。

↑こんな感じで。

これをVue.jsでやるとしたらどうしたら…？と思ったので、ちょっと考えました。

画像の間に▶を入れるでしょ…？JSで、

      partsIcon: function(abc){

          let def = abc.join(".png\">▶<img src=\"../icon/")

          return "<img src=\"../icon/"+def+".png\">"}

.join()を使って、HTMLで、

　<p v-html="partsIcon(pileusForm)"></p>

こう…？

それとも、HTMLで

<p><a v-for="a,index in pileusForm" :key="index">

          <img :src="'../icon/'+ a +'.png'">

          <span v-text="index == pileusForm.length-1 ? '':'▶'">

          </span></a></p>

こうすればmethodsで関数を作る必要はないような…？

Vue.jsなら関数を作らなくてもHTMLに出力できるっていうのがメリットなのかもしれないけど、「pileusForm」を1回で指定できるならmethodsで関数を作る方がスッキリする気がする…。

ぶっちゃけ、普通にfor文も使いこなせない。