diff --git a/docs/examples-docs/switch.md b/docs/examples-docs/switch.md
index adaaee710..4ebdd4949 100644
--- a/docs/examples-docs/switch.md
+++ b/docs/examples-docs/switch.md
@@ -13,15 +13,26 @@
 </style>
 
 <script>
+import Dialog from 'packages/dialog';
+
 export default {
   data() {
     return {
-      switchState: true
+      switchState1: true,
+      switchState2: true,
+      switchStateTrue: true,
+      switchStateFalse: false
     };
   },
   methods: {
     updateState(newState) {
-      this.switchState = newState;
+      const state = newState ? '打开' : '关闭';
+      Dialog.confirm({
+        title: '提醒',
+        message: '是否' + state + '开关？'
+      }).then((action) => {
+        this.switchState2 = newState;
+      }, (error) => {});
     }
   }
 };  
@@ -65,20 +76,47 @@ export default {
 
 :::demo 基础用法
 ```html
-<zan-switch class="some-customized-class" :checked="switchState" @change="updateState"></zan-switch>
-<div class="demo-switch__text">{{ this.switchState ? ' ON' : 'OFF' }}</div>
+<zan-switch class="some-customized-class" v-model="switchState1"></zan-switch>
+<div class="demo-switch__text">{{ switchState1 ? ' ON' : 'OFF' }}</div>
 
 
 <script>
 export default {
   data() {
     return {
-      switchState: true
+      switchState1: true
+    };
+  }
+};  
+</script>
+```
+:::
+
+:::demo 基础用法
+```html
+<zan-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></zan-switch>
+<div class="demo-switch__text">{{ switchState2 ? ' ON' : 'OFF' }}</div>
+
+
+<script>
+import Dialog from 'packages/dialog';
+
+export default {
+  data() {
+    return {
+      switchState2: true
     };
   },
   methods: {
     updateState(newState) {
-      this.switchState = newState;
+      const state = newState ? '打开' : '关闭';
+      Dialog.confirm({
+        title: '提醒',
+        message: '是否' + state + '开关？'
+      }).then((action) => {
+        this.switchState2 = newState;
+      }, (error) => {
+      });
     }
   }
 };  
@@ -86,17 +124,29 @@ export default {
 ```
 :::
 
+
 #### 禁用状态
 
 设置`disabled`属性为`true`，此时开关不可点击。
 
 :::demo
 ```html
-<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
+<zan-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></zan-switch>
 <div class="demo-switch__text">ON, DISABLED</div>
 
-<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
+<zan-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></zan-switch>
 <div class="demo-switch__text">OFF, DISABLED</div>
+
+<script>
+export default {
+  data() {
+    return {
+      switchStateTrue: true,
+      switchStateFalse: false
+    };
+  }
+};  
+</script>
 ```
 :::
 
@@ -106,11 +156,22 @@ export default {
 
 :::demo
 ```html
-<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
+<zan-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></zan-switch>
 <div class="demo-switch__text">ON, LOADING</div>
 
-<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
+<zan-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></zan-switch>
 <div class="demo-switch__text">OFF, LOADING</div>
+
+<script>
+export default {
+  data() {
+    return {
+      switchStateTrue: true,
+      switchStateFalse: false
+    };
+  }
+};  
+</script>
 ```
 :::
 
@@ -118,12 +179,7 @@ export default {
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| checked | 开关状态 | `boolean`  | `false`          | `true`, `false`    |
+| v-model | 开关状态 | `boolean`  | `false`          | `true`, `false`    |
 | loading | loading状态 | `boolean`  | `false`          | `true`, `false`    |
 | disabled | 禁用状态 | `boolean`  | `false`          | `true`, `false`    |
-
-### Event
-
-| 事件名       | 说明      | 参数       |
-|-----------|-----------|-----------|
-| change | 开关状态切换时触发 | `value`：开关新的状态值 |
+| onChange | 开关状态切换回调(默认则改变开关状态) | `function`  | -          | - |
diff --git a/packages/switch/src/switch.vue b/packages/switch/src/switch.vue
index 3249c3b93..2e8d28ae2 100644
--- a/packages/switch/src/switch.vue
+++ b/packages/switch/src/switch.vue
@@ -13,7 +13,7 @@ import ZanLoading from 'packages/loading';
  * zan-switch
  * @module components/switch
  * @desc 开关
- * @param {boolean} [checked=false] - 开关状态
+ * @param {boolean} [value=false] - 开关状态
  * @param {boolean} [disabled=false] - 禁用
  * @param {boolean} [loading=false] - loading状态
  *
@@ -26,9 +26,24 @@ export default {
     'zan-loading': ZanLoading
   },
   props: {
-    checked: Boolean,
+    value: Boolean,
     disabled: Boolean,
-    loading: Boolean
+    loading: Boolean,
+    onChange: Function
+  },
+  data() {
+    return {
+      checked: this.value
+    }
+  },
+  watch: {
+    checked(val) {
+      this.$emit('input', val);
+    },
+
+    value(val) {
+      this.checked = val;
+    }
   },
   computed: {
     switchStates: function() {
@@ -47,7 +62,12 @@ export default {
      */
     toggleState: function() {
       if (this.disabled || this.loading) return;
-      this.$emit('change', !this.checked);
+      console.log('d');
+      if (this.onChange) {
+        this.onChange(!this.checked);
+      } else {
+        this.checked = !this.checked;
+      }
     }
   }
 };