diff --git a/src/contact-card/README.md b/src/contact-card/README.md
index 8d6090e2b..8f6ca3233 100644
--- a/src/contact-card/README.md
+++ b/src/contact-card/README.md
@@ -42,21 +42,24 @@ export default {
 ```
 
 ```js
+import { reactive } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      currentContact: {
-        name: 'John Snow',
-        tel: '13000000000',
-      },
-    };
-  },
-  methods: {
-    onEdit() {
+  setup() {
+    const currentContact = reactive({
+      name: 'John Snow',
+      tel: '13000000000',
+    });
+
+    const onEdit = () => {
       Toast('edit');
-    },
+    };
+
+    return {
+      onEdit,
+      currentContact,
+    };
   },
 };
 ```
diff --git a/src/contact-card/README.zh-CN.md b/src/contact-card/README.zh-CN.md
index 33fbfdc41..e0baf255c 100644
--- a/src/contact-card/README.zh-CN.md
+++ b/src/contact-card/README.zh-CN.md
@@ -46,21 +46,24 @@ export default {
 ```
 
 ```js
+import { reactive } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      currentContact: {
-        name: '张三',
-        tel: '13000000000',
-      },
+  setup() {
+    const currentContact = reactive({
+      name: '张三',
+      tel: '13000000000',
+    });
+
+    const onEdit = () => {
+      Toast('edit');
+    };
+
+    return {
+      onEdit,
+      currentContact,
     };
-  },
-  methods: {
-    onEdit() {
-      Toast('编辑');
-    },
   },
 };
 ```
diff --git a/src/contact-card/demo/index.vue b/src/contact-card/demo/index.vue
index be226853c..1762b86c1 100644
--- a/src/contact-card/demo/index.vue
+++ b/src/contact-card/demo/index.vue
@@ -22,44 +22,51 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { computed } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
 
+const i18n = {
+  'zh-CN': {
+    add: '新增',
+    edit: '编辑',
+    name: '张三',
+    addContact: '添加联系人',
+    editContact: '编辑联系人',
+  },
+  'en-US': {
+    add: 'Add',
+    edit: 'Edit',
+    name: 'John Snow',
+    addContact: 'Add Contact',
+    editContact: 'Edit Contact',
+  },
+};
+
 export default {
-  i18n: {
-    'zh-CN': {
-      add: '新增',
-      edit: '编辑',
-      name: '张三',
-      addContact: '添加联系人',
-      editContact: '编辑联系人',
-    },
-    'en-US': {
-      add: 'Add',
-      edit: 'Edit',
-      name: 'John Snow',
-      addContact: 'Add Contact',
-      editContact: 'Edit Contact',
-    },
-  },
+  setup() {
+    const t = useTranslate(i18n);
 
-  computed: {
-    currentContact() {
-      return {
-        name: this.t('name'),
-        tel: '13000000000',
-      };
-    },
-  },
+    const currentContact = computed(() => ({
+      name: t('name'),
+      tel: '13000000000',
+    }));
 
-  methods: {
-    onAdd() {
-      Toast(this.t('add'));
-    },
+    const onAdd = () => {
+      Toast(t('add'));
+    };
 
-    onEdit() {
-      Toast(this.t('edit'));
-    },
+    const onEdit = () => {
+      Toast(t('edit'));
+    };
+
+    return {
+      t,
+      onAdd,
+      onEdit,
+      currentContact,
+    };
   },
 };
 </script>