2023.01.22 2023.01.31

【Vue3】v-bindの使い方。データバインディングで変数を使おう。省略記法もあります。

momeq

モー

今回は、v-bindを見ていきます。省略記法もあり、当然のように使うものなので、きちんと覚えておきたいですね。

Vue において、変数などをバインド（HTML要素に反映させること）するには、基本的に{{}}というマシュタッシュ構文を使うことになります。

でも、マシュタッシュ構文については、<>で囲まれた要素の間にしか使えません。

例） <h1>{{この部分にしか書けません。}}</h1>

でも、aタグのhref部分やimgのsrc部分って上のような<>で囲まれた部分ではなく、<>の中に書かなければならず、マスタッシュ構文って書けないんですよね。

例） <a href={この部分に変数を入れてバインドしたい}></a>

ニャー

こんな時に使えるのが、v-bindなんだにゃ。早速みていくんだにゃ。

Contents

基本的な使い方
実際のコードで確認
- href、srcなど
- disabled、readonlyなど
プログラミングを学ぶならTechAcademy（テックアカデミー）がおすすめ！

基本的な使い方

基本構文

基本的な使い方は、使いたい箇所の前にv-bind:をつけるだけです。これで値に変数名を取ることができます。

モー

v-とあるとVueを使っているという感じになりますね。

省略記法

v-bindは使用頻度がかなり高く、省略記法が用意されています。

ニャー

省略記法は大変便利なので、大体は省略記法で書いていくんだにゃ。

でも、実際の場合は、省略することで可読性が下がることから使われないこともあるので、プロジェクトごとなどで検討するといいんだにゃ。

v-bind内は式が書ける

v-bindの中では、JavaScriptの式を書くことができます。変数名や関数名を入れることが多いかもしれませんが、使えることは理解しておいた方がいいでしょう。

実際のコードで確認

href、srcなど

こちらは、通常の属性値を持つタイプです。もともと=（イコール）を使って繋ぐタイプですね。

基本構文の通り、v-bind:（省略:）をつけるだけで使えます。

<script setup lang="ts">
  const url = "https://www.google.com/"
  const src = "/src/sample.jpg"
</script>

<template>
  <div class="container"> 
    <a v-bind:href="url">Google</a>
    <img :src="src" alt="sample">
  </div>
</template>

<style scoped>
  .container{
    width: 100%;
    text-align: center;
  }
</style>

＊srcについては、うまく表示されないことがあります。こちら参考

モー

これ以外にも、altやname、classなんかも同じく使えます。変数の方がわかりやすいし、使い回しもできるので、積極的に使いたいところですね。

disabled、readonlyなど

属性値を持たない場合も紹介しておきます。disabledやreadonlyなどが考えられます。

もともと<>の中に書くだけなのですが、v-bindをつけて=（イコール）で繋げた上で、tureやfalseを値として取ることで、使う、使わないを選べます。

スクリプトから選べるようになる点で、動的な動きをつけることができるようになりますね。

<script setup lang="ts">
  const isDisabled = true;
  const isReadonly = true;
</script>

<template>
  <div class="container"> 
    <button :disabled="isDisabled">Add</button>
    <br />
    <br />
    <input type="text" value="編集できません" :readonly="isReadonly">
  </div>
</template>

<style scoped>
  .container{
    width: 100%;
    text-align: center;
  }
</style>