用途
新着
履歴
分類

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/'
  }
})

実行結果

描画後の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>
公開 2019-08-07 20:37:54
このページの二次元コード
VueJS 属性や値を指定する

人気のサンプル

search -  category -  about
© 2024 kipure
Top