「Vue.js入門」v-bindディレクティブでhtmlプログラムの値を判定するサンプル
構文
v-bind:class="{'CSS名A’: use}
useがtrueの場合、CSS名Aを呼び出す
使用例
CSSコード
<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>
JSコード
<script> new Vue({ el: '#arkgameApp', data:{ use: false } }); </script>