VueJS 属性や値を指定する

VueJS 属性や値を指定する

ディレクティブを指定するといろいろと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/'
  }
})

実行結果

実際こんなコードになっています。

<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>
  <!-- 上下どちらも同じです -->
  <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>
2017-12-31 21:23:53

関連するサンプル

人気記事ランキング

© 2018 kipure
Top