「Vue.js入門」v-bindディレクティブでhtmlプログラムの値を判定するサンプル
構文
v-bind:class="{'CSS名A’: use}
useがtrueの場合、CSS名Ａを呼び出す
使用例
CSSコード
<style>
.sampleA{
background: #444;
color: #eee;
}
</style>
<style>
.sampleA{
background: #444;
color: #eee;
}
</style>
<style>
.sampleA{
background: #444;
color: #eee;
}
</style>
htmlコード
<script src="js/vue.min.js"></script>
<div id="arkgameApp">
<label for="yc">update color</label>
<input type="checkbox" v-model="use" id="yc">
<br><br>
<div v-bind:class="{'sampleA': use}">
v-bind:class command
</div>
</div>
<script src="js/vue.min.js"></script>
<div id="arkgameApp">
<label for="yc">update color</label>
<input type="checkbox" v-model="use" id="yc">
<br><br>
<div v-bind:class="{'sampleA': use}">
v-bind:class command
</div>
</div>
<script src="js/vue.min.js"></script>
<div id="arkgameApp">
<label for="yc">update color</label>
<input type="checkbox" v-model="use" id="yc">
<br><br>
<div v-bind:class="{'sampleA': use}">
v-bind:class command
</div>
</div>
JSコード
<script>
new Vue({
el: '#arkgameApp',
data:{
use: false
}
});
</script>
<script>
new Vue({
el: '#arkgameApp',
data:{
use: false
}
});
</script>
<script>
new Vue({
el: '#arkgameApp',
data:{
use: false
}
});
</script>