【Vue.js】v-bindで属性を動的にするまとめ

はじめに

こんにちは。エンジニアの仕事をしている、たかふみです。

本日はVue.jsでよく使う、v-bindの値でattributeを動的にするにはどうしたらいいのか、TIPSをまとめていきたいと思います。

v-bindの基本

根本的にv-bindの基礎から説明いたしますが、v-bindとは、HTMLの属性を動的にするためのvue.jsの機能です。

下記例では、:classと書いていますが、これはv-bind:classの省略形です。
オブジェクトのkeyがtrueの場合、keyがクラス名として出力されます。
下記例だと、isPrime が正の場合は、btn-primaryがクラス名として出力され、負の場合はbtn-primaryがクラス名として出力されません。

<script setup>
const isPrime = false
</script>

<template>
    <button :class="{'btn-primary':isPrime}">クリック！</button>
</template>

v-bindでクラス名を固定値＋動的にしたい場合どうする？

結論：配列＋オブジェクトの形で設定するのをオススメ！

クラス名を動的＋固定値にしたい場合があると思います。

例えば、CSSのフレームワークであるBootstrapには、btn-primary　や　btn-danger、btn-infoなど、ボタンのクラス名を色別に定義できます。 特定の場合のみボタンの色を設定したいが、それ以外は設定しない場合があると思います。 そういう場合どうするでしょうか？
可変しないクラスは、v-bindのオブジェクトにキー名＋trueをいちいち設定するのだろうか。

この場合の対処方法は、冗長なオブジェクトとなるので可読性を上げるために、配列でクラスの固定値を持ち、可変性のある値はオブジェクトとして扱うと可読性が向上する。

<script setup>
const isPrime = false
</script>

<template>
    <!-- このように全てオブジェクトとして扱うと、クラス名が多い場合に冗長になる -->
    <button :class="{'btn-primary':isPrime,btn:true,aaa:true,bbb:true,ccc:true}">クリック！</button>

    <!-- 配列＋オブジェクトとして扱うと可読性が上がる -->
    <button :class="['btn aaa bbb ccc ddd',{'btn-primary':isPrime}]">クリック！</button>
</template>

APIの帰り値をクラス名に設定したい

結論：配列をオブジェクトのキーに設定すると動的になる！

あまりよくない例なのだが、やんごとなき事情により、クラス名がAPIから返却される場合があるとします。

この場合どうしましょう？

この場合の対処方法は、v-bindのkeyを動的に設定する必要があります。

ES6以降の書き方なのですが、配列をオブジェクトのキーに設定すると動的なキーに設定できます。

<script setup>
// APIからデータソースを取得した値だとします。
const data = {
    id:1,
    class_name:'btn-success'
}
</script>

<template>
    <!-- 配列をオブジェクトのキーに設定すると、キー名になる -->
    <button :class="['btn ',{[data.class_name]:true}]">クリック！</button>
</template>

aタグのhref属性を動的にしたい時

結論：属性のダブルクオーテーションの中に、シングルクオーテーションで文字列を設定する

aタグのhref属性に、tel:090XXXXZZZZ などと設定すると、aタグクリック時に電話をかけることができます。

これをv-bindを使用して設定するにはどうしたらいいでしょうか？

この場合の対処方法は、シングルクオーテーションで'tel:'と設定すれば動的に値を設定することができます。

ダブルクオーテーションの中ではシングルクオーテーションを設定しないと、文字列として認識されません。

<template>
    <a :href="'tel:'+'090XXXXZZZZ '">でんわ</a>
</template>

aタグのtarget="_blnak"を動的するにはどうしたらいいか

結論：三項演算子を使用してv-bindの出力条件分岐する

別タブでウィンドウを開きたい時、aタグのtarget="_blnak"を設定する必要があります。
これを動的にするにはどうしたらいいでしょうか。

条件によって、target="blnak"か、target="self"かを切り分ける必要があります。

この場合の対処方法は、三項演算子を使って出力制御すると良いのではないでしょうか。

<script setup>
const isBlank = true
</script>

<template>
    <a href="https://programmer-note.hatenablog.com" :target="isBlank ? '_blank':'_self'">リンクです</a>
</template>

まとめ

いかがでしたでしょうか。

v-bindの動的な設定は、よく考えれば難しくないのですが、少しハマりますのでTIPSとしてまとめました。

開発の参考にしていただければ幸いです。