elementUI中el-switch中:value和v-model在切换开关调用接口时页面行为的不同表现

当我们在使用v-model的时候，虽然我们点击确认框的“取消”，是先又原来的开关切换状态，再切换回去。因为v-model再点击的时候已经改变了el-switch的状态了，取消时再将值变回去。如下图所示：会有一个切换的动画状态。

<template>
  <div class="home">
    <el-switch
      v-model="value"
      active-color="#13ce66"
      inactive-color="#ff4949"
      active-text="开"
      inactive-text="关"
      @change="handleChange"
    >开关</el-switch>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data () {
    return {
      value: true
    };
  },
  methods: {
    handleChange () {
      this.$confirm('关闭后可能导致问题', '确定关闭吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //
      }).catch(() => {
        this.value = true;
      });
    }
  }
}
</script>

而使用:value进行数据绑定，则展示形式又大不相同了。
:value没有改变值，所以不会有过渡状态。

<template>
  <div class="home">
    <el-switch
      :value="value"
      active-color="#13ce66"
      inactive-color="#ff4949"
      active-text="开"
      inactive-text="关"
      @change="handleChange"
    >开关</el-switch>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data () {
    return {
      value: true
    };
  },
  methods: {
    handleChange () {
      this.$confirm('关闭后可能导致问题', '确定关闭吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //
      }).catch(() => {
        // this.value = true;
      });
    }
  }
}
</script>

个人感觉还是用:value比较好～～