diff --git a/components/avatar/demo/dynamic.md b/components/avatar/demo/dynamic.md
index c7a44f7ce..2ffdde702 100644
--- a/components/avatar/demo/dynamic.md
+++ b/components/avatar/demo/dynamic.md
@@ -9,6 +9,25 @@ For letter type Avatar, when the letters are too long to display, the font size
 </us>
 
 ```html
+<script>
+  const UserList = ['U', 'Lucy', 'Tom', 'Edward']
+  const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae']
+  export default {
+    data () {
+      return {
+        avatarValue: UserList[0],
+        color: colorList[0],
+      }
+    },
+    methods: {
+      changeValue () {
+        const index = UserList.indexOf(this.avatarValue)
+        this.avatarValue = index < UserList.length - 1 ? UserList[index + 1] : UserList[0]
+        this.color = index < colorList.length - 1 ? colorList[index + 1] : colorList[0]
+      },
+    },
+  }
+</script>
 <template>
   <div>
     <a-avatar shape="square" size="large" :style="{'backgroundColor': color}">{{avatarValue}}</a-avatar>
diff --git a/components/avatar/demo/index.vue b/components/avatar/demo/index.vue
index cfef329dd..9cdfbb407 100644
--- a/components/avatar/demo/index.vue
+++ b/components/avatar/demo/index.vue
@@ -41,6 +41,8 @@ export default {
         <br/>
         <Type/>
         <br/>
+        <Dynamic/>
+        <br/>
         <api>
           <template slot='cn'>
             <CN/>