[Vue.js] HTMLタグの属性に値をバインディングする

投稿日：2021年4月16日更新日：2021年5月16日

Vue.jsでHTMLタグの属性に、値をバインディングするサンプルです。

サンプルソース

例）aタグのhref属性にバインディングする

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Vue.jsサンプル</title>
</head>
<body>
  <div id="app">
    <a v-bind:href="url">ヤフー</a>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="sample.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Vue.jsサンプル</title>

</head>

<body>

</div>

</body>

</html>

var app = new Vue({
  el: "#app",
  data:{
    url: "https://www.yahoo.co.jp"
  }
})

var app = new Vue({

el: "#app",

data:{

url: "https://www.yahoo.co.jp"

}

})

解説

HTMLタグの属性値に値をバインディングするには、「v-bind」を使用します。
v-bindの構文は以下の通りです。
v-bind:＜属性名＞="＜data名＞"

執筆者：とら