Vue绑定指令v-model

在写表单的时候，发现用和原声input的使用不太一样，vue通过v-model实现了数据的双向绑定，但是想要写一个简单的点击单选框触发某事件的简单功能时却不知道如何使用。

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

image.png

这里给出一个示例：
html

<input type="checkbox" class="switch" v-model="checked" @change="checkChange">

<script>标签中

export default {
  name: 'OperaterSetting',
  data () {
    return {
      checked: false
    }
  },

  methods:{
    checkChange(){
      if(this.checked){
        console.log(this.checked)
        MessageBox('提示', 'checked');
      }else{
        console.log(this.checked)
        MessageBox('提示', 'not checked'); 
      }
    }
}

效果如下

image.png

image.png