Vueのテンプレートのv-bind内でもJavaScriptのテンプレートリテラルが使えた

v-bind: (省略形は:)内で文字列を連結したいときはこれまで+でがんばってつっくけてたけど、テンプレートリテラルを使えることに気づいた。環境はVue CLI 3。

developer.mozilla.org

before

<img :src="img"
  :alt='format.title + "テンプレート" + index'>

after

<img :src="img"
  :alt='`${format.title}テンプレート ${index}`'></li>

${}の分は増えるけど、クオーテーションを閉じたり、開いたり面倒なのがなくせる。
場合によるけど文章内にいくつか変数を使う場合に便利かも。

バックティック文字「`」(日本語キーボードだとShift + @)だけでは無理で、外側をシングルorダブルクオーテーションで囲む必要がある

だめ

:alt=`${nanika}`

おｋ

:alt="`${nanika}`"

v-bindについては下記公式
jp.vuejs.org

Python3.6で使えるようになったf-stringと一緒に、良い感じに使いこなしたい。
note.nkmk.me