【Vue.js】HTML属性の操作(v-bind)

Javascript用フレームワーク「Vue.js」でHTML属性を操作(v-bind)する方法をソースコード付きでまとめました。

HTML属性の操作(v-bind)

Javascript用フレームワーク「Vue.js」では、v-bind属性でHTML属性を操作できます。

書式

&<input type="button" v-bind:属性名="treasure">

「v-bind:属性名=」のように指定した属性を操作できます。
「v-bind:属性名=」は「:属性名=」で省略して記述可能です。

&<input type="button" :value="treasure">

サンプルコード

サンプルプログラムのソースコードです。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<!-- Vue.js の読み込み -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>

<div id="app">
    <input type="button" v-bind:value="treasure">
</div>

<script src="./js/main.js"></script>
</body>
</html>

./js/main.js

var app = new Vue({
    el: '#app',
    data: { treasure: '宝具' }
});

buttonタグのvalue属性に「宝具」をセットしています。

関連ページ
1 【Vue.js入門】使い方・サンプル集
2 Javascript入門 サンプル集
3 Node.js入門
関連記事