JSFiddle - React, Tailwind, and code Playground

by lin zhou

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app1">
  <input type="checkbox" v-model="checked" />
  <span for="checkbox"> {{checked}} </span>
</div>

<div id="app2">
  <input type="checkbox" value="A" v-model="checks" />
  <span>A</span>
  <p></p>
  <input type="checkbox" value="B" v-model="checks" />
  <span>B</span>
  <p></p>
  <input type="checkbox" value="C" v-model="checks" />
  <span>C</span>
  <p></p>
  <span v-for="item in checks">{{item}}</span>
</div>

JavaScript

// checkbox
let vm1 = new Vue({
  el: '#app1',
  data: {
    "checked": true
  }
})

let vm2 = new Vue({
  el: '#app2',
  data: {
    "checks": []
  },
  watch: {
    "checks": function() {
			console.log(this.checks);
    }
  }
});