v-bindディレクティブで複数の属性をまとめて一括指定する [Vue.js]

Vue.jsのv-bindディレクティブを使用すると、HTML要素の属性に値をバインドすることができます。

v-bindディレクティブでは、「v-bind:」に続けて属性を指定することで、属性に値（または式）をバインドすることができます。

<要素 v-bind:属性名=値または式></要素>

1	<要素 v-bind:属性名=値または式></要素>

通常は、v-bindディレクティブでは上記のように属性と値を指定しますが、v-bindディレクティブでは、属性を一括で指定する方法も用意されています。

そこで今回は、v-bindディレクティブを使用して属性を一括してまとめて指定する方法を紹介します。

v-bindディレクティブで複数の属性をまとめて指定する

v-bindディレクティブには「{属性名: 値, 属性名: 値, 属性名: 値, ・・・}」の形式のオブジェクトを渡すことで、複数の属性をまとめてバインドすることができます。

以下にinput要素（タグ）の複数の属性をまとめて一括で指定する例を示します。

HTML

<div id="app">
  テキストボックス: <input v-bind="attributes" />
</div>

テキストボックス: <input v-bind="attributes" />

</div>

JavaScript

Vue.createApp({
  data: function() {
    return {
      attributes: {
        id: 'textBox',
        type: 'text',
        size: 20,
        maxlength: 10,
        required: true,
        placeholder: '入力してください'
      }
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

attributes: {

id: 'textBox',

type: 'text',

size: 20,

maxlength: 10,

required: true,

placeholder: '入力してください'

}

}).mount('#app')

ここでは、id属性、type属性、size属性、maxlength属性、required属性、placeholder属性をattributesというオブジェクトのプロパティに指定しています。

HTML要素の属性情報をオブジェクト（ハッシュ）として渡す場合は、v-bindディレクティブの引数の属性（v-bind:引数の属性）は不要です。
上記の例でrequired属性にはtrueを指定しています。
required属性やreadonly属性など、値を持たない属性を設定する場合は値にboolean型の真偽値（true/false）を指定します。

上記のコードを実行（ブラウザーで表示）するとして出力されるHTMLは、以下のようになります。

<input
  id="textBox"
  type="text"
  size="20"
  maxlength="10"
  required=""
  placeholder="入力してください">

<input

id="textBox"

type="text"

size="20"

maxlength="10"

required=""

placeholder="入力してください">

最後にjsFiddleに貼り付けて動作を確認できるコードのサンプルを掲載しておきます。

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  テキストボックス: <input v-bind="attrs" />
</div>

<script>
Vue.createApp({
  data: function() {
    return {
      attrs: {
        id: 'textBox',
        type: 'text',
        size: 20,
        maxlength: 10,
        required: true,
        placeholder: '入力してください'
      }
    }
  }
}).mount('#app')
</script>