Vue:checkbox勾選者背景換色

by cactus77kiki

HTML

<!--try: 勾選時改變css-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<ul id="app">
  <li v-for="row in rows" v-bind:class="{select : row.ischeck}">
    <input type='checkbox' v-model="row.ischeck"/>{{row.idx}}{{row.ischeck}}
  </li>
  
</ul>

CSS

.select{
  background:blue;
}

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    rows: [{"ischeck":false,"idx":1},
    {"ischeck":false,"idx":2},
    {"ischeck":false,"idx":3},
    {"ischeck":false,"idx":4},
    {"ischeck":false,"idx":5}
    ]
  }
})