JavaScript

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

v-bindの使い方
momeq
モー
モー

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

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

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

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

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

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

ニャー
ニャー

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

基本的な使い方

基本構文

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

<a v-bind:href=”変数名”></a>

モー
モー

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

省略記法

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

<a :href=”変数名”></a>

ニャー
ニャー

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

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

v-bind内は式が書ける

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

<a :href=”変数名 + ‘/about.html’ “></a>

実際のコードで確認

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>

プログラミングを学ぶならTechAcademy(テックアカデミー)がおすすめ!

TechAcademy [テックアカデミー]

モー
モー

独学で苦戦している人は、一度しっかりと基礎を学ぶと次のステップへ進めますよ。今のおすすめは、TechAcademy(テックアカデミー)ですね。

TechAcademyのおすすめポイント
  • オンラインで選抜された現役エンジニアから学ぶことができる
  • 自宅からWeb制作・プログラミング・アプリ開発など幅広い分野を学べる
  • 学ぶだけではなく、転職の支援、副業に活かせるスキルの習得、副業の仕事紹介まで行っている
ニャー
ニャー

無料体験や相談もあるから、一度試してみてもいいんだにゃ!

\無料体験、無料相談はこちらから/



記事URLをコピーしました