ディレクティブを指定するといろいろとHTMLの記述ができます。
属性を指定する
<div id="myApp" class="demo_code"> <a v-bind:href="url"> トップページへのリンク </a> </div>
var app = new Vue({ el: '#myApp', data: { url: 'http://www.kipure.com/' } })
実行結果
描画後のHTMLはこうなっています。
<div id="myApp" class="demo_code"> <a href="http://www.kipure.com/">トップページへのリンク</a> </div>
属性を指定できれば、いろいろなことができます。
次は値を書き込む一例としてテキストを指定します。
テキストを指定する
<div id="myApp2" class="demo_code"> <span v-text="text"></span> <br> <span>{{text}}</span> </div>
var app = new Vue({ el: '#myApp2', data: { text: 'テキストを表示する' } })
実行結果
{{text}}
コードはこんな感じ。
<div id="myApp2" class="demo_code"> <span>テキストを表示する</span> <br> <span>テキストを表示する</span> </div>