[Vue.js] HTML の属性を変更する

Vue.js で HTML の属性を変更したい場合は `v-bind` を使用します。 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX9yUV52WRN9-XEPzRIaB1g6slT3APlWliZBXv_tOJMM8WL0YtHyBioCAtZ8r-T_wb2DyhCFoPQHFn-OwIBdQu1mMs0ZX1W1EcPckob5VioW7GbhZ_yYVJaUl3z0oOrWjZHdcDQwVb6hA/s1600/vuejs.png" imageanchor="1" hidden><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX9yUV52WRN9-XEPzRIaB1g6slT3APlWliZBXv_tOJMM8WL0YtHyBioCAtZ8r-T_wb2DyhCFoPQHFn-OwIBdQu1mMs0ZX1W1EcPckob5VioW7GbhZ_yYVJaUl3z0oOrWjZHdcDQwVb6hA/s200/vuejs.png" width="200" height="200" data-original-width="400" data-original-height="400" /></a> 以下、公式ドキュメントを自分なりにまとめなおしただけです。 - https://jp.vuejs.org/v2/guide/class-and-style.html ## 基本 例えば、`class` の値を変更したい場合は以下のように記述します。 ``` <div v-bind:class="status"></div>``` ``` data: { status: 'active', } ``` **展開後** ``` <div class="active"></div>``` ## 条件指定（オブジェクト構文） 属性の出力を条件分岐させたい場合、以下のようなオブジェクト構文を使用します。 ``` <div v-bind:class="{ active: isActive }"></div>``` ``` data: { isActive: true, } ``` `active` クラスの出力は、`data` プロパティの `isActive` の値によって決まります。 `{出力したい属性: 条件式}` です。 **展開後** `isActive` が `true` の場合 ``` <div class="active"></div>``` `isActive` が `false` の場合 ``` <div class=""></div>``` ### 属性値がハイフンを含む場合 注意点として、クラスの属性値がハイフン `-` を含む場合は、シングルコーテーション `'` で括る必要があるようです。 ``` <div v-bind:class="{ 'text-danger': isActive }"></div>``` ``` data: { isActive: true, } ``` ### オブジェクトとのバインド 上記はインラインでバインドを記述していますが、以下のように記述することもできます。 ``` <div v-bind:class="classObject"></div>``` ``` data: { classObject: { active: true, 'text-danger': true } } ``` **展開後** ``` <div class="active text-danger"></div>``` ### computed プロパティとのバインド 条件は `data` プロパティ以外に、`computed` プロパティとバインドすることもできます。 ``` <div v-bind:class="classObject"></div>``` ``` data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } } ``` **展開後** ``` <div class="active"></div>``` ## 静的フィールドとの共存 既に静的に `class` が記述してあっても、Vue.js の `v-bind` と共存できます。 ``` <div class="static" v-bind:class="status"></div>``` ``` data: { status: 'active', } ``` **展開後** ``` <div class="static active"></div>``` ## 配列構文 配列を渡してクラスのリストを適用することもできます。 ``` <div v-bind:class="[activeClass, errorClass]"></div>``` ``` data: { activeClass: 'active', errorClass: 'text-danger' } ``` **展開後** ``` <div class="active text-danger"></div>``` ## 参考 URL - https://jp.vuejs.org/v2/guide/class-and-style.html - https://noumenon-th.net/programming/2019/05/21/v-bind/