「Vue.js入門」v-bindディレクティブでhtmlプログラムの値を判定するサンプル

2020年11月25日

構文
v-bind:class="{'CSS名A’: use}
useがtrueの場合、CSS名Ａを呼び出す
使用例

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>