元Webデザイナー兼コーダーの備忘録

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

【Vue.js】属性の書き換え:v-bind

v-bindを使ってHTMLの属性を書き換えます。ここでは、href属性とclass属性を書き換えてみます。

v-bindでhref属性を書き換える

<div id="app">
  <p><a v-bind:href="url">{{title}}</a></p>
</div>
var app = new Vue({
  el: '#app',
  data: {
    title: '元Webデザイナー兼コーダーの備忘録',
    url: 'https://shiroyuki2020.hatenablog.com/'
  }
});

ブラウザの検証でElementsを確認すると、href属性に指定したURLが反映されているのが確認できます。

v-bindの間違った書き方

<div id="app">
  <p><a href="{{url}}">{{title}}</a></p>
</div>

{{}}は、属性のところでは展開できず、そのまま記述されます。そのため、HTMLの属性を指定するときは、v-bindを使います。

v-bindでclass属性を書き換える

class属性の書き換えをしてみます。

<div id="app">
  <p v-bind:class="hello_class">Hello Vue.js</p>
</div>
var app = new Vue({
  el: '#app',
  data: {
    hello_class: 'hello'
  }
});
.hello{
  color: blue;
}

表示を確認すると以下のようになります。

ブラウザの検証でElementsを確認すると下図のようになります。

HTMLの他の属性でも書き換えできるか確認してみると良いです。

» HTML入門のまとめはこちらです。