みかづきブログ その3

3ヶ月つづけてみました。

Vueで論理属性(その属性が存在するかしないかだけで意味を持つ属性)をバインドする

まず、loopとかautoplayとかreadonlyとか値なしの存在だけでOKな属性のことを論理属性と呼ぶことを知らなかったので、調べるのに苦労しました。

reference.hyper-text.org

しかし、答えは単純で、例えばloop属性の場合、

<audio src="https://kimizuka.fm/audio/top/bgm.mp3" v-bind:loop="isLoop"></audio>

みたいな感じにしておいて、isLoopがfalse、null、undefinedであればloop属性は付与されず、
それ以外の値はloop属性が付与されます。

0 とか ' 'とかNaN、falsyな値でもloop属性が付与されるので、付与したくない場合はfalseを渡すのが良いと思います。

いろいろ調べた後に改めて、Vueのページをみたら、そもそもしっかり記載してありました。

jp.vuejs.org