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の他の属性でも書き換えできるか確認してみると良いです。