diff --git a/src/swipe/README.md b/src/swipe/README.md
index 395e25d72..825cee28f 100644
--- a/src/swipe/README.md
+++ b/src/swipe/README.md
@@ -50,13 +50,12 @@ Use `lazy-render` prop to enable lazy rendering.
 
 ```js
 export default {
-  data() {
-    return {
-      images: [
-        'https://img.yzcdn.cn/vant/apple-1.jpg',
-        'https://img.yzcdn.cn/vant/apple-2.jpg',
-      ],
-    };
+  setup() {
+    const images = [
+      'https://img.yzcdn.cn/vant/apple-1.jpg',
+      'https://img.yzcdn.cn/vant/apple-2.jpg',
+    ];
+    return { images };
   },
 };
 ```
@@ -76,10 +75,11 @@ export default {
 import { Toast } from 'vant';
 
 export default {
-  methods: {
-    onChange(index) {
+  setup() {
+    const onChange = (index) => {
       Toast('Current Swipe index:' + index);
-    },
+    };
+    return { onChange };
   },
 };
 ```
@@ -134,16 +134,18 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      current: 0,
+  setup() {
+    const current = ref(0);
+    const onChange = (index) => {
+      current.value = index;
+    };
+    return {
+      current,
+      onChange,
     };
-  },
-  methods: {
-    onChange(index) {
-      this.current = index;
-    },
   },
 };
 ```
diff --git a/src/swipe/README.zh-CN.md b/src/swipe/README.zh-CN.md
index 1fdfb1272..655414281 100644
--- a/src/swipe/README.zh-CN.md
+++ b/src/swipe/README.zh-CN.md
@@ -54,13 +54,12 @@ app.use(SwipeItem);
 
 ```js
 export default {
-  data() {
-    return {
-      images: [
-        'https://img.yzcdn.cn/vant/apple-1.jpg',
-        'https://img.yzcdn.cn/vant/apple-2.jpg',
-      ],
-    };
+  setup() {
+    const images = [
+      'https://img.yzcdn.cn/vant/apple-1.jpg',
+      'https://img.yzcdn.cn/vant/apple-2.jpg',
+    ];
+    return { images };
   },
 };
 ```
@@ -80,10 +79,11 @@ export default {
 import { Toast } from 'vant';
 
 export default {
-  methods: {
-    onChange(index) {
+  setup() {
+    const onChange = (index) => {
       Toast('当前 Swipe 索引：' + index);
-    },
+    };
+    return { onChange };
   },
 };
 ```
@@ -144,16 +144,18 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      current: 0,
+  setup() {
+    const current = ref(0);
+    const onChange = (index) => {
+      current.value = index;
+    };
+    return {
+      current,
+      onChange,
     };
-  },
-  methods: {
-    onChange(index) {
-      this.current = index;
-    },
   },
 };
 ```
diff --git a/src/swipe/demo/index.vue b/src/swipe/demo/index.vue
index 6ed5e45b2..a3faf71cc 100644
--- a/src/swipe/demo/index.vue
+++ b/src/swipe/demo/index.vue
@@ -64,6 +64,10 @@
 </template>
 
 <script>
+import { ref } from 'vue';
+import { useTranslate } from '../../composables/use-translate';
+import Toast from '../../toast';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -84,26 +88,30 @@ export default {
     },
   },
 
-  data() {
-    return {
-      current: 0,
-      images: [
-        'https://img.yzcdn.cn/vant/apple-1.jpg',
-        'https://img.yzcdn.cn/vant/apple-2.jpg',
-        'https://img.yzcdn.cn/vant/apple-3.jpg',
-        'https://img.yzcdn.cn/vant/apple-4.jpg',
-      ],
+  setup() {
+    const t = useTranslate();
+    const current = ref(0);
+    const images = [
+      'https://img.yzcdn.cn/vant/apple-1.jpg',
+      'https://img.yzcdn.cn/vant/apple-2.jpg',
+      'https://img.yzcdn.cn/vant/apple-3.jpg',
+      'https://img.yzcdn.cn/vant/apple-4.jpg',
+    ];
+
+    const onChange1 = (index) => {
+      Toast(t('message') + index);
     };
-  },
 
-  methods: {
-    onChange1(index) {
-      this.$toast(this.t('message') + index);
-    },
+    const onChange2 = (index) => {
+      current.value = index;
+    };
 
-    onChange2(index) {
-      this.current = index;
-    },
+    return {
+      images,
+      current,
+      onChange1,
+      onChange2,
+    };
   },
 };
 </script>