【Vue.js】v-bindでタグ属性を一気に指定したい

通常、imgタグ内に属性やサイズなどを指定する際には以下のような書き方をしなければなりません。

<img id="1" alt="商品1サムネイル" width="200" height="200" src="......">

しかし、これでは1つ1つ書き込む手間も、修正にかかる時間も大きく、html自体の可視性も下がってしまいます。


Vue.jsのv-bindを使用すれば、最初にかかる手間は同じでも、修正時間、可視性どちらも改善してくれるはず。



See the Pen
ZgWQmG
by りっしー (@hiwriterprogram)
on CodePen.


また、以下のようにコードを書くことによってオブジェクト内の要素1つだけを書き換えることができます!

<img v-bind:="item" v-bind:id="'thumb-' + item.id">