PKTseng

<div id="app">
  <button :type="selected">submit</button>
</div>

PKTseng

<div id="app">
  <input type="checkbox" :checked='selected'>
  <button @click='toggle'>toggle</button>
</div>

PKTseng

new Vue({
  el:"#app",
  data:{
    selected: false,
  },
  methods:{
    toggle(){
      this.selected = !this.selected;
    }
  }

PKTseng

<div id="app">
  <span>{{count}}</span>
  <input type="checkbox">
  <button @click='add'>add</button>
</div>

PKTseng

new Vue({
  el:"#app",
  data:{
    count: 0,
  },
  methods:{
    add(){
      this.count +=1;
    }
  }

PKTseng

<div id="app">
  <ul>
    <li v-for="todos in todo">{{todos}}</li>
  </ul>
</div>

PKTseng

new Vue({
  el:"#app",
  data:{
    todo:[
      "html",
      "javascript",
      "css",
    ],
  }
})

PKTseng

<div id="app">
  <select>
    <option v-for="month in months">{{month}}
  </select>
</div>

PKTseng

new Vue({
  el:"#app",
  data:{
    months:[1,2,3,4,5,6,7,8,9,10,11,12],
  }
})

PKTseng

<div id="app">
  <select>
    <option v-for="month in 30">{{month}}</option>
  </select>
</div>


<script>
new Vue({
  el:"#app",