v-bindの使い方-Vue.js
Vue.js Article
ここでは、v-bindディレクティブの基本的な使い方をサンプルコードを参考に解説していきます。
v-bindの基本的な使い方
HTMLのタグ（要素）には、様々な属性を与えることが出来ます。v-bindはこの要素の属性へのデータバインディングに使われます。
Vue.js
v-bind:属性名="値"以下のコードは、inputのvalueにdataのbuttonTextをバインディングしています。ボタンのテキストにはボタンと表示されます。
Vue.js
<div id="app">
<input type="button" v-bind:value="buttonText">
</div>
<script>
var app = new Vue({
el: "#app",
data: {
buttonText: 'ボタン'
},
})
</script>クラスやスタイルへの バインディング
classやstyle属性へのバインディングは少し違っていて、オブジェクトや配列を渡してバインディングします。
Vue.js
v-bind:class="オブジェクト・配列"
v-bind:style="オブジェクト・配列"クラスへのバインディング
クラスをオブジェクトで渡すときは
Vue.js
{ クラス名 : 真偽値 }以下のコードではpタグのclassへisAcriveがtrueのときactiveクラスが有効となります。
Vue.js
<div id="app">
<p v-bind:class="{ active: isActive }">pタグ</p>
<button @click="isActive = !isActive">切り替え</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
isActive: true
},
})
</script>
<style>
.active{
color: #ff8d3f;
}
</style>クラスを配列で渡すときは
Vue.js
[ 変数やオブジェクト ]以下のコードでは3つのクラスを渡しています。
Vue.js
<div id="app">
<p v-bind:class="[ class1, class2, class3 ]">pタグ</p>
<button @click="isActive = !isActive">切り替え</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
isActive: true,
class1: 'class1',
class2: 'class2',
class3: 'class3',
},
})
</script>また、三項演算子を使いたい場合にも配列を用います。
Vue.js
<p v-bind:class="[isActive ? 'active' : 'inactive']">pタグ</p>v-onについてはこちら
スタイルへのバインディング
スタイルをオブジェクトで渡すときは
Vue.js
{ プロパティ : 値 }プロパティについてはケバブケースのままだとエラーとなるので以下のようにキャメルケースにしたり文字列にして対応します。
Vue.js
<p v-bind:style="{backgroundColor: 'red'}">pタグ</p>
<p v-bind:style="{'background-color': 'red'}">pタグ</p>スタイルを配列で渡すときは
Vue.js
[スタイルのオブジェクト,・・・,・・・]オブジェクトを渡す
複数の属性にバインディングしたり、複数のクラスやスタイルをバインディングする場合には可読性が悪くなってしまいます。このようなときにはオブジェクトにまとめて渡すことができます。
複数属性
Vue.js
<div id="app">
<input v-bind="multiBind"/>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
isActive: true,
},
computed:{
multiBind(){
return {
type: 'text',
autcomplete: true,
placeholder: 'input',
require: true,
}
}
}
})
</script>複数クラス
Vue.js
<div id="app">
<p v-bind:class="multiClass">pタグ</p>
<button @click="isActive = !isActive">切り替え</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
isActive: true,
},
computed:{
multiClass(){
return {
active: this.isActive,
inactive: !this.isActive
}
}
}
})
</script>
<style>
.active{
color: #ff8d3f;
}
.inactive{
color: blue
}
</style>複数スタイル
Vue.js
<div id="app">
<button @click="changeNum()">切り替え</button>
<p v-bind:style="multiStyle">pタグ</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
num: 255,
},
methods:{
changeNum(){
this.num = (this.num + 20) % 256
}
},
computed:{
multiStyle(){
return {
width: 100 + this.num + 'px',
height: 100 + this.num + 'px',
color: 'white',
background: 'rgb('+ this.num + ', 100,' + (255-this.num) +')',
}
}
}
})
</script>標準の指定と同時に使う
標準の指定と同時に使うことができます。idなど一つしか指定できないものは上書きされ、classなど複数指定できるものは共存します。
Vue.js
<p id="id_a" v-bind:id="'id_b'">pタグ</p>
=> <p id="id_b">pタグ</p>
<p class="class_a" v-bind:class="'class_b'">pタグ</p>
=> <p class="class_a class_b">pタグ</p>