VueJSで要素の属性を条件付きで追加する（v-ifで分岐させて属性を追加）

Vue.2 までは以下のようにすればいい。

<input :required="test ? true : false">

<input :required="test">   // if true
<input :required="!test">  // if false
<input :required="!!test"> // test ? true : false

注意： !!!aと!!!aの間には違いはありません。なぜなら、!!!aは単に!!!（!a）であり、また、!!!aは真偽値であるため、!!!（!a）は単にその二重否定であり、したがって同じです。

Vue 3 の場合

Vue 3では、属性の条件付きレンダリングが変更されました。属性を省略するには、null または undefined を使用します。

<div :attr="false">
Result: <div attr="false">

<div :attr="null">
Result: <div>