diff --git a/examples/docs/en-US/loading.md b/examples/docs/en-US/loading.md
index a305498a1..c7aebf069 100644
--- a/examples/docs/en-US/loading.md
+++ b/examples/docs/en-US/loading.md
@@ -70,7 +70,7 @@ You can customize loading text, loading spinner and background color.
 ```html
 <template>
   <el-table
-    v-loading="loading2"
+    v-loading="loading"
     element-loading-text="Loading..."
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.8)"
@@ -110,7 +110,7 @@ You can customize loading text, loading spinner and background color.
           name: 'John Smith',
           address: 'No.1518,  Jinshajiang Road, Putuo District'
         }],
-        loading2: true
+        loading: true
       };
     }
   };
@@ -134,7 +134,7 @@ Show a full screen animation while loading data.
   </el-button>
   <el-button
     type="primary"
-    @click="openFullScreen2">
+    @click="openFullScreen">
     As a service
   </el-button>
 </template>
@@ -153,7 +153,7 @@ Show a full screen animation while loading data.
           this.fullscreenLoading = false;
         }, 2000);
       },
-      openFullScreen2() {
+      openFullScreen() {
         const loading = this.$loading({
           lock: true,
           text: 'Loading',
diff --git a/examples/docs/en-US/message-box.md b/examples/docs/en-US/message-box.md
index 2616e3507..dec08c4e6 100644
--- a/examples/docs/en-US/message-box.md
+++ b/examples/docs/en-US/message-box.md
@@ -44,13 +44,13 @@ Confirm is used to ask users' confirmation.
 
 ```html
 <template>
-  <el-button type="text" @click="open2">Click to open the Message Box</el-button>
+  <el-button type="text" @click="open">Click to open the Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open2() {
+      open() {
         this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
           confirmButtonText: 'OK',
           cancelButtonText: 'Cancel',
@@ -82,13 +82,13 @@ Prompt is used when user input is required.
 
 ```html
 <template>
-  <el-button type="text" @click="open3">Click to open Message Box</el-button>
+  <el-button type="text" @click="open">Click to open Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open3() {
+      open() {
         this.$prompt('Please input your e-mail', 'Tip', {
           confirmButtonText: 'OK',
           cancelButtonText: 'Cancel',
@@ -120,13 +120,13 @@ Can be customized to show various content.
 
 ```html
 <template>
-  <el-button type="text" @click="open4">Click to open Message Box</el-button>
+  <el-button type="text" @click="open">Click to open Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open4() {
+      open() {
         const h = this.$createElement;
         this.$msgbox({
           title: 'Message',
@@ -176,13 +176,13 @@ The content of MessageBox can be `VNode`, allowing us to pass custom components.
 
 ```html
 <template>
-  <el-button type="text" @click="open5">Click to open Message Box</el-button>
+  <el-button type="text" @click="open">Click to open Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open5() {
+      open() {
         this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
           dangerouslyUseHTMLString: true
         });
@@ -205,13 +205,13 @@ In some cases, clicking the cancel button and close button may have different me
 
 ```html
 <template>
-  <el-button type="text" @click="open6">Click to open Message Box</el-button>
+  <el-button type="text" @click="open">Click to open Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open6() {
+      open() {
         this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {
           distinguishCancelAndClose: true,
           confirmButtonText: 'Save',
@@ -245,13 +245,13 @@ Content of MessageBox can be centered.
 
 ```html
 <template>
-  <el-button type="text" @click="open7">Click to open Message Box</el-button>
+  <el-button type="text" @click="open">Click to open Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open7() {
+      open() {
         this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
           confirmButtonText: 'OK',
           cancelButtonText: 'Cancel',
diff --git a/examples/docs/en-US/radio.md b/examples/docs/en-US/radio.md
index e1192bf90..0cc42555c 100644
--- a/examples/docs/en-US/radio.md
+++ b/examples/docs/en-US/radio.md
@@ -32,15 +32,15 @@ Radio should not have too many options. Otherwise, use the Select component inst
 :::demo You just need to add the `disabled` attribute.
 ```html
 <template>
-  <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>
-  <el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>
+  <el-radio disabled v-model="radio" label="disabled">Option A</el-radio>
+  <el-radio disabled v-model="radio" label="selected and disabled">Option B</el-radio>
 </template>
 
 <script>
   export default {
     data () {
       return {
-        radio1: 'selected and disabled'
+        radio: 'selected and disabled'
       };
     }
   }
@@ -55,7 +55,7 @@ Suitable for choosing from some mutually exclusive options.
 :::demo Combine `el-radio-group` with `el-radio` to display a radio group. Bind a variable with `v-model` of `el-radio-group` element and set label value in `el-radio`. It also provides `change` event with the current value as its parameter.
 
 ```html
-<el-radio-group v-model="radio2">
+<el-radio-group v-model="radio">
   <el-radio :label="3">Option A</el-radio>
   <el-radio :label="6">Option B</el-radio>
   <el-radio :label="9">Option C</el-radio>
@@ -65,7 +65,7 @@ Suitable for choosing from some mutually exclusive options.
   export default {
     data () {
       return {
-        radio2: 3
+        radio: 3
       };
     }
   }
@@ -81,7 +81,7 @@ Radio with button styles.
 ```html
 <template>
   <div>
-    <el-radio-group v-model="radio3">
+    <el-radio-group v-model="radio1">
       <el-radio-button label="New York"></el-radio-button>
       <el-radio-button label="Washington"></el-radio-button>
       <el-radio-button label="Los Angeles"></el-radio-button>
@@ -89,7 +89,7 @@ Radio with button styles.
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio4" size="medium">
+    <el-radio-group v-model="radio2" size="medium">
       <el-radio-button label="New York" ></el-radio-button>
       <el-radio-button label="Washington"></el-radio-button>
       <el-radio-button label="Los Angeles"></el-radio-button>
@@ -97,7 +97,7 @@ Radio with button styles.
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio5" size="small">
+    <el-radio-group v-model="radio3" size="small">
       <el-radio-button label="New York"></el-radio-button>
       <el-radio-button label="Washington" disabled ></el-radio-button>
       <el-radio-button label="Los Angeles"></el-radio-button>
@@ -105,7 +105,7 @@ Radio with button styles.
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio6" disabled size="mini">
+    <el-radio-group v-model="radio4" disabled size="mini">
       <el-radio-button label="New York"></el-radio-button>
       <el-radio-button label="Washington"></el-radio-button>
       <el-radio-button label="Los Angeles"></el-radio-button>
@@ -118,10 +118,10 @@ Radio with button styles.
   export default {
     data () {
       return {
+        radio1: 'New York',
+        radio2: 'New York',
         radio3: 'New York',
-        radio4: 'New York',
-        radio5: 'New York',
-        radio6: 'New York'
+        radio4: 'New York'
       };
     }
   }
@@ -135,21 +135,21 @@ Radio with button styles.
 ```html
 <template>
   <div>
-    <el-radio v-model="radio7" label="1" border>Option A</el-radio>
-    <el-radio v-model="radio7" label="2" border>Option B</el-radio>
+    <el-radio v-model="radio1" label="1" border>Option A</el-radio>
+    <el-radio v-model="radio1" label="2" border>Option B</el-radio>
   </div>
   <div style="margin-top: 20px">
-    <el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>
-    <el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>
+    <el-radio v-model="radio2" label="1" border size="medium">Option A</el-radio>
+    <el-radio v-model="radio2" label="2" border size="medium">Option B</el-radio>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio9" size="small">
+    <el-radio-group v-model="radio3" size="small">
       <el-radio label="1" border>Option A</el-radio>
       <el-radio label="2" border disabled>Option B</el-radio>
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio10" size="mini" disabled>
+    <el-radio-group v-model="radio4" size="mini" disabled>
       <el-radio label="1" border>Option A</el-radio>
       <el-radio label="2" border>Option B</el-radio>
     </el-radio-group>
@@ -160,10 +160,10 @@ Radio with button styles.
   export default {
     data () {
       return {
-        radio7: '1',
-        radio8: '1',
-        radio9: '1',
-        radio10: '1'
+        radio1: '1',
+        radio2: '1',
+        radio3: '1',
+        radio4: '1'
       };
     }
   }
diff --git a/examples/docs/en-US/rate.md b/examples/docs/en-US/rate.md
index ce875caae..36ddaab6e 100644
--- a/examples/docs/en-US/rate.md
+++ b/examples/docs/en-US/rate.md
@@ -40,7 +40,7 @@ Using text to indicate rating score
 
 ```html
 <el-rate
-  v-model="value3"
+  v-model="value"
   :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
   show-text>
 </el-rate>
@@ -49,7 +49,7 @@ Using text to indicate rating score
   export default {
     data() {
       return {
-        value3: null
+        value: null
       }
     }
   }
@@ -65,7 +65,7 @@ You can use different icons to distinguish different rate components.
 
 ```html
 <el-rate
-  v-model="value4"
+  v-model="value"
   :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
   void-icon-class="icon-rate-face-off"
   :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
@@ -75,7 +75,7 @@ You can use different icons to distinguish different rate components.
   export default {
     data() {
       return {
-        value4: null
+        value: null
       }
     }
   }
@@ -91,7 +91,7 @@ Read-only Rate is for displaying rating score. Half star is supported.
 
 ```html
 <el-rate
-  v-model="value5"
+  v-model="value"
   disabled
   show-score
   text-color="#ff9900"
@@ -102,7 +102,7 @@ Read-only Rate is for displaying rating score. Half star is supported.
   export default {
     data() {
       return {
-        value5: 3.7
+        value: 3.7
       }
     }
   }
diff --git a/examples/docs/en-US/select.md b/examples/docs/en-US/select.md
index 1e62fec9b..d9d7d6491 100644
--- a/examples/docs/en-US/select.md
+++ b/examples/docs/en-US/select.md
@@ -52,9 +52,9 @@ When there are plenty of options, use a drop-down menu to display and select des
 
 ```html
 <template>
-  <el-select v-model="value2" placeholder="Select">
+  <el-select v-model="value" placeholder="Select">
     <el-option
-      v-for="item in options2"
+      v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value"
@@ -67,7 +67,7 @@ When there are plenty of options, use a drop-down menu to display and select des
   export default {
     data() {
       return {
-        options2: [{
+        options: [{
           value: 'Option1',
           label: 'Option1'
         }, {
@@ -84,7 +84,7 @@ When there are plenty of options, use a drop-down menu to display and select des
           value: 'Option5',
           label: 'Option5'
         }],
-        value2: ''
+        value: ''
       }
     }
   }
@@ -99,7 +99,7 @@ Disable the whole component.
 :::demo Set `disabled` of `el-select` to make it disabled.
 ```html
 <template>
-  <el-select v-model="value3" disabled placeholder="Select">
+  <el-select v-model="value" disabled placeholder="Select">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -129,7 +129,7 @@ Disable the whole component.
           value: 'Option5',
           label: 'Option5'
         }],
-        value3: ''
+        value: ''
       }
     }
   }
@@ -144,7 +144,7 @@ You can clear Select using a clear icon.
 :::demo Set `clearable` attribute for `el-select` and a clear icon will appear. Note that `clearable` is only for single select.
 ```html
 <template>
-  <el-select v-model="value4" clearable placeholder="Select">
+  <el-select v-model="value" clearable placeholder="Select">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -174,7 +174,7 @@ You can clear Select using a clear icon.
           value: 'Option5',
           label: 'Option5'
         }],
-        value4: ''
+        value: ''
       }
     }
   }
@@ -250,7 +250,7 @@ You can customize HTML templates for options.
 
 ```html
 <template>
-  <el-select v-model="value6" placeholder="Select">
+  <el-select v-model="value" placeholder="Select">
     <el-option
       v-for="item in cities"
       :key="item.value"
@@ -285,7 +285,7 @@ You can customize HTML templates for options.
           value: 'Guangzhou',
           label: 'Guangzhou'
         }],
-        value6: ''
+        value: ''
       }
     }
   }
@@ -301,9 +301,9 @@ Display options in groups.
 
 ```html
 <template>
-  <el-select v-model="value7" placeholder="Select">
+  <el-select v-model="value" placeholder="Select">
     <el-option-group
-      v-for="group in options3"
+      v-for="group in options"
       :key="group.label"
       :label="group.label">
       <el-option
@@ -320,7 +320,7 @@ Display options in groups.
   export default {
     data() {
       return {
-        options3: [{
+        options: [{
           label: 'Popular cities',
           options: [{
             value: 'Shanghai',
@@ -345,7 +345,7 @@ Display options in groups.
             label: 'Dalian'
           }]
         }],
-        value7: ''
+        value: ''
       }
     }
   }
@@ -360,7 +360,7 @@ You can filter options for your desired ones.
 :::demo Adding `filterable` to `el-select` enables filtering. By default, Select will find all the options whose `label` attribute contains the input value. If you prefer other filtering strategies, you can pass the `filter-method`. `filter-method` is a `Function` that gets called when the input value changes, and its parameter is the current input value.
 ```html
 <template>
-  <el-select v-model="value8" filterable placeholder="Select">
+  <el-select v-model="value" filterable placeholder="Select">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -390,7 +390,7 @@ You can filter options for your desired ones.
           value: 'Option5',
           label: 'Option5'
         }],
-        value8: ''
+        value: ''
       }
     }
   }
@@ -407,7 +407,7 @@ Enter keywords and search data from server.
 ```html
 <template>
   <el-select
-    v-model="value9"
+    v-model="value"
     multiple
     filterable
     remote
@@ -416,7 +416,7 @@ Enter keywords and search data from server.
     :remote-method="remoteMethod"
     :loading="loading">
     <el-option
-      v-for="item in options4"
+      v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value">
@@ -428,8 +428,8 @@ Enter keywords and search data from server.
   export default {
     data() {
       return {
-        options4: [],
-        value9: [],
+        options: [],
+        value: [],
         list: [],
         loading: false,
         states: ["Alabama", "Alaska", "Arizona",
@@ -462,13 +462,13 @@ Enter keywords and search data from server.
           this.loading = true;
           setTimeout(() => {
             this.loading = false;
-            this.options4 = this.list.filter(item => {
+            this.options = this.list.filter(item => {
               return item.label.toLowerCase()
                 .indexOf(query.toLowerCase()) > -1;
             });
           }, 200);
         } else {
-          this.options4 = [];
+          this.options = [];
         }
       }
     }
@@ -483,14 +483,14 @@ Create and select new items that are not included in select options
 ```html
 <template>
   <el-select
-    v-model="value10"
+    v-model="value"
     multiple
     filterable
     allow-create
     default-first-option
     placeholder="Choose tags for your article">
     <el-option
-      v-for="item in options5"
+      v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value">
@@ -502,7 +502,7 @@ Create and select new items that are not included in select options
   export default {
     data() {
       return {
-        options5: [{
+        options: [{
           value: 'HTML',
           label: 'HTML'
         }, {
@@ -512,7 +512,7 @@ Create and select new items that are not included in select options
           value: 'JavaScript',
           label: 'JavaScript'
         }],
-        value10: []
+        value: []
       }
     }
   }
diff --git a/examples/docs/es/loading.md b/examples/docs/es/loading.md
index b0694a03f..320972ef6 100644
--- a/examples/docs/es/loading.md
+++ b/examples/docs/es/loading.md
@@ -70,7 +70,7 @@ Puede personalizar el texto de carga, spinner de carga y color de fondo.
 ```html
 <template>
   <el-table
-    v-loading="loading2"
+    v-loading="loading"
     element-loading-text="Loading..."
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.8)"
@@ -110,7 +110,7 @@ Puede personalizar el texto de carga, spinner de carga y color de fondo.
           name: 'John Smith',
           address: 'No.1518,  Jinshajiang Road, Putuo District'
         }],
-        loading2: true
+        loading: true
       };
     }
   };
@@ -134,7 +134,7 @@ Muestra una animación de pantalla completa mientras se cargan los datos
   </el-button>
   <el-button
     type="primary"
-    @click="openFullScreen2">
+    @click="openFullScreen">
     Como servicio
   </el-button>
 </template>
@@ -153,7 +153,7 @@ Muestra una animación de pantalla completa mientras se cargan los datos
           this.fullscreenLoading = false;
         }, 2000);
       },
-      openFullScreen2() {
+      openFullScreen() {
         const loading = this.$loading({
           lock: true,
           text: 'Loading',
diff --git a/examples/docs/es/message-box.md b/examples/docs/es/message-box.md
index a9a1c744f..e19c246cb 100644
--- a/examples/docs/es/message-box.md
+++ b/examples/docs/es/message-box.md
@@ -45,13 +45,13 @@ Confirm es utilizado para preguntar al usuario y recibir una confirmacion.
 
 ```html
 <template>
-  <el-button type="text" @click="open2">Click to open the Message Box</el-button>
+  <el-button type="text" @click="open">Click to open the Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open2() {
+      open() {
         this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
           confirmButtonText: 'OK',
           cancelButtonText: 'Cancel',
@@ -83,13 +83,13 @@ Prompt es utilizado cuando se requiere entrada de informacion del usuario.
 
 ```html
 <template>
-  <el-button type="text" @click="open3">Click to open Message Box</el-button>
+  <el-button type="text" @click="open">Click to open Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open3() {
+      open() {
         this.$prompt('Please input your e-mail', 'Tip', {
           confirmButtonText: 'OK',
           cancelButtonText: 'Cancel',
@@ -121,13 +121,13 @@ Puede ser personalizado para mostrar diversos contenidos.
 
 ```html
 <template>
-  <el-button type="text" @click="open4">Click to open Message Box</el-button>
+  <el-button type="text" @click="open">Click to open Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open4() {
+      open() {
         const h = this.$createElement;
         this.$msgbox({
           title: 'Message',
@@ -179,13 +179,13 @@ El contenido de MessageBox puede ser `VNode`, permitiéndonos pasar componentes
 
 ```html
 <template>
-  <el-button type="text" @click="open5">Click to open Message Box</el-button>
+  <el-button type="text" @click="open">Click to open Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open5() {
+      open() {
         this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
           dangerouslyUseHTMLString: true
         });
@@ -209,13 +209,13 @@ En algunos casos, hacer clic en el botón Cancelar y en el botón Cerrar puede t
 
 ```html
 <template>
-  <el-button type="text" @click="open6">Click to open Message Box</el-button>
+  <el-button type="text" @click="open">Click to open Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open6() {
+      open() {
         this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {
           distinguishCancelAndClose: true,
           confirmButtonText: 'Save',
@@ -249,13 +249,13 @@ El contenido del componente MessageBox puede ser centrado.
 
 ```html
 <template>
-  <el-button type="text" @click="open7">Click to open Message Box</el-button>
+  <el-button type="text" @click="open">Click to open Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open7() {
+      open() {
         this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
           confirmButtonText: 'OK',
           cancelButtonText: 'Cancel',
diff --git a/examples/docs/es/radio.md b/examples/docs/es/radio.md
index 44ce0c3f5..b29dcc1ba 100644
--- a/examples/docs/es/radio.md
+++ b/examples/docs/es/radio.md
@@ -30,15 +30,15 @@ El atributo `disabled` es utilizado para deshabilitar un Radio.
 :::demo Solo necesita agregar el atributo `disabled`.
 ```html
 <template>
-  <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>
-  <el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>
+  <el-radio disabled v-model="radio" label="disabled">Option A</el-radio>
+  <el-radio disabled v-model="radio" label="selected and disabled">Option B</el-radio>
 </template>
 
 <script>
   export default {
     data () {
       return {
-        radio1: 'selected and disabled'
+        radio: 'selected and disabled'
       };
     }
   }
@@ -53,7 +53,7 @@ Recomendado para seleccionar opciones que se excluyen mutuamente.
 :::demo Combine `el-radio-group` con `el-radio` para mostrar un grupo de Radios. Enlace la variable con `v-model` del elemento `el-radio-group` y asigne el valor del `label` en `el-radio`. Se provee el evento `change` con el valor actual como parámetro.
 
 ```html
-<el-radio-group v-model="radio2">
+<el-radio-group v-model="radio">
   <el-radio :label="3">Option A</el-radio>
   <el-radio :label="6">Option B</el-radio>
   <el-radio :label="9">Option C</el-radio>
@@ -63,7 +63,7 @@ Recomendado para seleccionar opciones que se excluyen mutuamente.
   export default {
     data () {
       return {
-        radio2: 3
+        radio: 3
       };
     }
   }
@@ -79,7 +79,7 @@ Radio con estilo de botón.
 ```html
 <template>
   <div>
-    <el-radio-group v-model="radio3">
+    <el-radio-group v-model="radio1">
       <el-radio-button label="New York"></el-radio-button>
       <el-radio-button label="Washington"></el-radio-button>
       <el-radio-button label="Los Angeles"></el-radio-button>
@@ -87,7 +87,7 @@ Radio con estilo de botón.
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio4" size="medium">
+    <el-radio-group v-model="radio2" size="medium">
       <el-radio-button label="New York" ></el-radio-button>
       <el-radio-button label="Washington"></el-radio-button>
       <el-radio-button label="Los Angeles"></el-radio-button>
@@ -95,7 +95,7 @@ Radio con estilo de botón.
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio5" size="small">
+    <el-radio-group v-model="radio3" size="small">
       <el-radio-button label="New York"></el-radio-button>
       <el-radio-button label="Washington" disabled ></el-radio-button>
       <el-radio-button label="Los Angeles"></el-radio-button>
@@ -103,7 +103,7 @@ Radio con estilo de botón.
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio6" disabled size="mini">
+    <el-radio-group v-model="radio4" disabled size="mini">
       <el-radio-button label="New York"></el-radio-button>
       <el-radio-button label="Washington"></el-radio-button>
       <el-radio-button label="Los Angeles"></el-radio-button>
@@ -116,10 +116,10 @@ Radio con estilo de botón.
   export default {
     data () {
       return {
+        radio1: 'New York',
+        radio2: 'New York',
         radio3: 'New York',
-        radio4: 'New York',
-        radio5: 'New York',
-        radio6: 'New York'
+        radio4: 'New York'
       };
     }
   }
@@ -133,21 +133,21 @@ Radio con estilo de botón.
 ```html
 <template>
   <div>
-    <el-radio v-model="radio7" label="1" border>Option A</el-radio>
-    <el-radio v-model="radio7" label="2" border>Option B</el-radio>
+    <el-radio v-model="radio1" label="1" border>Option A</el-radio>
+    <el-radio v-model="radio1" label="2" border>Option B</el-radio>
   </div>
   <div style="margin-top: 20px">
-    <el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>
-    <el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>
+    <el-radio v-model="radio2" label="1" border size="medium">Option A</el-radio>
+    <el-radio v-model="radio2" label="2" border size="medium">Option B</el-radio>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio9" size="small">
+    <el-radio-group v-model="radio3" size="small">
       <el-radio label="1" border>Option A</el-radio>
       <el-radio label="2" border disabled>Option B</el-radio>
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio10" size="mini" disabled>
+    <el-radio-group v-model="radio4" size="mini" disabled>
       <el-radio label="1" border>Option A</el-radio>
       <el-radio label="2" border>Option B</el-radio>
     </el-radio-group>
@@ -158,10 +158,10 @@ Radio con estilo de botón.
   export default {
     data () {
       return {
-        radio7: '1',
-        radio8: '1',
-        radio9: '1',
-        radio10: '1'
+        radio1: '1',
+        radio2: '1',
+        radio3: '1',
+        radio4: '1'
       };
     }
   }
diff --git a/examples/docs/es/rate.md b/examples/docs/es/rate.md
index 8f9558191..6cb6d88ef 100644
--- a/examples/docs/es/rate.md
+++ b/examples/docs/es/rate.md
@@ -41,7 +41,7 @@ Usa texto para indicar la puntuación
 
 ```html
 <el-rate
-  v-model="value3"
+  v-model="value"
   :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
   show-text>
 </el-rate>
@@ -50,7 +50,7 @@ Usa texto para indicar la puntuación
   export default {
     data() {
       return {
-        value3: null
+        value: null
       }
     }
   }
@@ -66,7 +66,7 @@ Puede utilizar iconos para diferenciar cada componente.
 
 ```html
 <el-rate
-  v-model="value4"
+  v-model="value"
   :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
   void-icon-class="icon-rate-face-off"
   :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
@@ -76,7 +76,7 @@ Puede utilizar iconos para diferenciar cada componente.
   export default {
     data() {
       return {
-        value4: null
+        value: null
       }
     }
   }
@@ -92,7 +92,7 @@ La calificación de solo lectura es para mostrar la puntuación. Soporta media e
 
 ```html
 <el-rate
-  v-model="value5"
+  v-model="value"
   disabled
   show-score
   text-color="#ff9900"
@@ -103,7 +103,7 @@ La calificación de solo lectura es para mostrar la puntuación. Soporta media e
   export default {
     data() {
       return {
-        value5: 3.7
+        value: 3.7
       }
     }
   }
diff --git a/examples/docs/es/select.md b/examples/docs/es/select.md
index 7501478b3..5748cde70 100644
--- a/examples/docs/es/select.md
+++ b/examples/docs/es/select.md
@@ -52,9 +52,9 @@ Cuando haya muchas opciones, utilice un menú desplegable para mostrar y selecci
 
 ```html
 <template>
-  <el-select v-model="value2" placeholder="Select">
+  <el-select v-model="value" placeholder="Select">
     <el-option
-      v-for="item in options2"
+      v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value"
@@ -67,7 +67,7 @@ Cuando haya muchas opciones, utilice un menú desplegable para mostrar y selecci
   export default {
     data() {
       return {
-        options2: [{
+        options: [{
           value: 'Option1',
           label: 'Option1'
         }, {
@@ -84,7 +84,7 @@ Cuando haya muchas opciones, utilice un menú desplegable para mostrar y selecci
           value: 'Option5',
           label: 'Option5'
         }],
-        value2: ''
+        value: ''
       }
     }
   }
@@ -100,7 +100,7 @@ Desactivar todo el componente.
 
 ```html
 <template>
-  <el-select v-model="value3" disabled placeholder="Select">
+  <el-select v-model="value" disabled placeholder="Select">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -130,7 +130,7 @@ Desactivar todo el componente.
           value: 'Option5',
           label: 'Option5'
         }],
-        value3: ''
+        value: ''
       }
     }
   }
@@ -146,7 +146,7 @@ Puede limpiar un Select con un icono.
 
 ```html
 <template>
-  <el-select v-model="value4" clearable placeholder="Select">
+  <el-select v-model="value" clearable placeholder="Select">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -176,7 +176,7 @@ Puede limpiar un Select con un icono.
           value: 'Option5',
           label: 'Option5'
         }],
-        value4: ''
+        value: ''
       }
     }
   }
@@ -236,7 +236,8 @@ Selección multiple utiliza tags para mostrar las opciones seleccionadas.
           value: 'Option5',
           label: 'Option5'
         }],
-        value5: []
+        value5: [],
+        value11: []
       }
     }
   }
@@ -252,7 +253,7 @@ Puede personalizar templates HTML para las opciones.
 
 ```html
 <template>
-  <el-select v-model="value6" placeholder="Select">
+  <el-select v-model="value" placeholder="Select">
     <el-option
       v-for="item in cities"
       :key="item.value"
@@ -287,7 +288,7 @@ Puede personalizar templates HTML para las opciones.
           value: 'Guangzhou',
           label: 'Guangzhou'
         }],
-        value6: ''
+        value: ''
       }
     }
   }
@@ -303,9 +304,9 @@ Mostrar opciones en grupos.
 
 ```html
 <template>
-  <el-select v-model="value7" placeholder="Select">
+  <el-select v-model="value" placeholder="Select">
     <el-option-group
-      v-for="group in options3"
+      v-for="group in options"
       :key="group.label"
       :label="group.label">
       <el-option
@@ -322,7 +323,7 @@ Mostrar opciones en grupos.
   export default {
     data() {
       return {
-        options3: [{
+        options: [{
           label: 'Popular cities',
           options: [{
             value: 'Shanghai',
@@ -347,7 +348,7 @@ Mostrar opciones en grupos.
             label: 'Dalian'
           }]
         }],
-        value7: ''
+        value: ''
       }
     }
   }
@@ -363,7 +364,7 @@ Puede filtrar opciones como lo desee.
 
 ```html
 <template>
-  <el-select v-model="value8" filterable placeholder="Select">
+  <el-select v-model="value" filterable placeholder="Select">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -393,7 +394,7 @@ Puede filtrar opciones como lo desee.
           value: 'Option5',
           label: 'Option5'
         }],
-        value8: ''
+        value: ''
       }
     }
   }
@@ -410,7 +411,7 @@ Introduzca palabras y datos para buscar desde el servidor.
 ```html
 <template>
   <el-select
-    v-model="value9"
+    v-model="value"
     multiple
     filterable
     remote
@@ -419,7 +420,7 @@ Introduzca palabras y datos para buscar desde el servidor.
     :remote-method="remoteMethod"
     :loading="loading">
     <el-option
-      v-for="item in options4"
+      v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value">
@@ -431,8 +432,8 @@ Introduzca palabras y datos para buscar desde el servidor.
   export default {
     data() {
       return {
-        options4: [],
-        value9: [],
+        options: [],
+        value: [],
         list: [],
         loading: false,
         states: ["Alabama", "Alaska", "Arizona",
@@ -465,13 +466,13 @@ Introduzca palabras y datos para buscar desde el servidor.
           this.loading = true;
           setTimeout(() => {
             this.loading = false;
-            this.options4 = this.list.filter(item => {
+            this.options = this.list.filter(item => {
               return item.label.toLowerCase()
                 .indexOf(query.toLowerCase()) > -1;
             });
           }, 200);
         } else {
-          this.options4 = [];
+          this.options = [];
         }
       }
     }
@@ -488,13 +489,13 @@ Crear y seleccionar nuevos items que no están incluidas en las opciones de sele
 ```html
 <template>
   <el-select
-    v-model="value10"
+    v-model="value"
     multiple
     filterable
     allow-create
     placeholder="Choose tags for your article">
     <el-option
-      v-for="item in options5"
+      v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value">
@@ -506,7 +507,7 @@ Crear y seleccionar nuevos items que no están incluidas en las opciones de sele
   export default {
     data() {
       return {
-        options5: [{
+        options: [{
           value: 'HTML',
           label: 'HTML'
         }, {
@@ -516,7 +517,7 @@ Crear y seleccionar nuevos items que no están incluidas en las opciones de sele
           value: 'JavaScript',
           label: 'JavaScript'
         }],
-        value10: []
+        value: []
       }
     }
   }
diff --git a/examples/docs/fr-FR/loading.md b/examples/docs/fr-FR/loading.md
index 22ec081ee..4b8f19672 100644
--- a/examples/docs/fr-FR/loading.md
+++ b/examples/docs/fr-FR/loading.md
@@ -70,7 +70,7 @@ Vous pouvez personnaliser le texte, le spinner et la couleur de fond.
 ```html
 <template>
   <el-table
-    v-loading="loading2"
+    v-loading="loading"
     element-loading-text="Loading..."
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.8)"
@@ -110,7 +110,7 @@ Vous pouvez personnaliser le texte, le spinner et la couleur de fond.
           name: 'John Smith',
           address: 'No.1518,  Jinshajiang Road, Putuo District'
         }],
-        loading2: true
+        loading: true
       };
     }
   };
@@ -134,7 +134,7 @@ Affichez une animation en plein écran quand vous charger des données.
   </el-button>
   <el-button
     type="primary"
-    @click="openFullScreen2">
+    @click="openFullScreen">
     Comme service
   </el-button>
 </template>
@@ -153,7 +153,7 @@ Affichez une animation en plein écran quand vous charger des données.
           this.fullscreenLoading = false;
         }, 2000);
       },
-      openFullScreen2() {
+      openFullScreen() {
         const loading = this.$loading({
           lock: true,
           text: 'Loading',
diff --git a/examples/docs/fr-FR/message-box.md b/examples/docs/fr-FR/message-box.md
index 558800d2a..99b235b73 100644
--- a/examples/docs/fr-FR/message-box.md
+++ b/examples/docs/fr-FR/message-box.md
@@ -45,13 +45,13 @@ Confirm est utilisé pour demander une confirmation à l'utilisateur.
 
 ```html
 <template>
-  <el-button type="text" @click="open2">Cliquez pour ouvrir la MessageBox</el-button>
+  <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open2() {
+      open() {
         this.$confirm('Ceci effacera le fichier. Continuer?', 'Warning', {
           confirmButtonText: 'OK',
           cancelButtonText: 'Annuler',
@@ -83,13 +83,13 @@ Prompt est utilisé lorsqu'un utilisateur.
 
 ```html
 <template>
-  <el-button type="text" @click="open3">Cliquez pour ouvrir la MessageBox</el-button>
+  <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open3() {
+      open() {
         this.$prompt('Entrez votre e-mail', 'Astuce', {
           confirmButtonText: 'OK',
           cancelButtonText: 'Annuler',
@@ -121,13 +121,13 @@ Il est possible d'afficher du contenu un peu plus varié et personnalisé.
 
 ```html
 <template>
-  <el-button type="text" @click="open4">Cliquez pour ouvrir la MessageBox</el-button>
+  <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open4() {
+      open() {
         const h = this.$createElement;
         this.$msgbox({
           title: 'Message',
@@ -177,13 +177,13 @@ Le contenu de MessageBox peut être `VNode`, Vous permettant de passer des compo
 
 ```html
 <template>
-  <el-button type="text" @click="open5">Cliquez pour ouvrir la MessageBox</el-button>
+  <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open5() {
+      open() {
         this.$alert('<strong>Ceci est du <i>HTML</i></strong>', 'HTML', {
           dangerouslyUseHTMLString: true
         });
@@ -206,13 +206,13 @@ Dans certains cas, les boutons fermer et annuler peuvent avoir des sens différe
 
 ```html
 <template>
-  <el-button type="text" @click="open6">Cliquez pour ouvrir la MessageBox</el-button>
+  <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open6() {
+      open() {
         this.$confirm('Vous avez du travail non-enregistré, enregistrer et quitter?', 'Confirm', {
           distinguishCancelAndClose: true,
           confirmButtonText: 'Enregistrer',
@@ -247,13 +247,13 @@ le contenu de MessageBox peut être centré.
 
 ```html
 <template>
-  <el-button type="text" @click="open7">Cliquez pour ouvrir la MessageBox</el-button>
+  <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open7() {
+      open() {
         this.$confirm('Ceci effacera le fichier, continuer?' , 'Warning', {
           confirmButtonText: 'OK',
           cancelButtonText: 'Annuler',
diff --git a/examples/docs/fr-FR/radio.md b/examples/docs/fr-FR/radio.md
index 605a0d66e..9cc07b9f9 100644
--- a/examples/docs/fr-FR/radio.md
+++ b/examples/docs/fr-FR/radio.md
@@ -32,15 +32,15 @@ L'attribut `disabled` désactive le radio.
 :::demo Ajoutez simplement l'attribut `disabled` au radio.
 ```html
 <template>
-  <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>
-  <el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>
+  <el-radio disabled v-model="radio" label="disabled">Option A</el-radio>
+  <el-radio disabled v-model="radio" label="selected and disabled">Option B</el-radio>
 </template>
 
 <script>
   export default {
     data () {
       return {
-        radio1: 'selected and disabled'
+        radio: 'selected and disabled'
       };
     }
   }
@@ -55,7 +55,7 @@ Utile pour choisir entre plusieurs groupes d'options mutuellement exclusives.
 :::demo Combinez `el-radio-group` avec `el-radio` pour afficher un groupe de radios. Liez une variable au `v-model` de `el-radio-group` et configurez le label dans `el-radio`. Cet élément fournit aussi l'évènement `change` qui a en paramètre la valeur courante.
 
 ```html
-<el-radio-group v-model="radio2">
+<el-radio-group v-model="radio">
   <el-radio :label="3">Option A</el-radio>
   <el-radio :label="6">Option B</el-radio>
   <el-radio :label="9">Option C</el-radio>
@@ -65,7 +65,7 @@ Utile pour choisir entre plusieurs groupes d'options mutuellement exclusives.
   export default {
     data () {
       return {
-        radio2: 3
+        radio: 3
       };
     }
   }
@@ -81,7 +81,7 @@ Des radios affichés comme des boutons standards.
 ```html
 <template>
   <div>
-    <el-radio-group v-model="radio3">
+    <el-radio-group v-model="radio1">
       <el-radio-button label="New York"></el-radio-button>
       <el-radio-button label="Washington"></el-radio-button>
       <el-radio-button label="Los Angeles"></el-radio-button>
@@ -89,7 +89,7 @@ Des radios affichés comme des boutons standards.
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio4" size="medium">
+    <el-radio-group v-model="radio2" size="medium">
       <el-radio-button label="New York" ></el-radio-button>
       <el-radio-button label="Washington"></el-radio-button>
       <el-radio-button label="Los Angeles"></el-radio-button>
@@ -97,7 +97,7 @@ Des radios affichés comme des boutons standards.
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio5" size="small">
+    <el-radio-group v-model="radio3" size="small">
       <el-radio-button label="New York"></el-radio-button>
       <el-radio-button label="Washington" disabled ></el-radio-button>
       <el-radio-button label="Los Angeles"></el-radio-button>
@@ -105,7 +105,7 @@ Des radios affichés comme des boutons standards.
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio6" disabled size="mini">
+    <el-radio-group v-model="radio4" disabled size="mini">
       <el-radio-button label="New York"></el-radio-button>
       <el-radio-button label="Washington"></el-radio-button>
       <el-radio-button label="Los Angeles"></el-radio-button>
@@ -118,10 +118,10 @@ Des radios affichés comme des boutons standards.
   export default {
     data () {
       return {
+        radio1: 'New York',
+        radio2: 'New York',
         radio3: 'New York',
-        radio4: 'New York',
-        radio5: 'New York',
-        radio6: 'New York'
+        radio4: 'New York'
       };
     }
   }
@@ -135,21 +135,21 @@ Des radios affichés comme des boutons standards.
 ```html
 <template>
   <div>
-    <el-radio v-model="radio7" label="1" border>Option A</el-radio>
-    <el-radio v-model="radio7" label="2" border>Option B</el-radio>
+    <el-radio v-model="radio1" label="1" border>Option A</el-radio>
+    <el-radio v-model="radio1" label="2" border>Option B</el-radio>
   </div>
   <div style="margin-top: 20px">
-    <el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>
-    <el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>
+    <el-radio v-model="radio2" label="1" border size="medium">Option A</el-radio>
+    <el-radio v-model="radio2" label="2" border size="medium">Option B</el-radio>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio9" size="small">
+    <el-radio-group v-model="radio3" size="small">
       <el-radio label="1" border>Option A</el-radio>
       <el-radio label="2" border disabled>Option B</el-radio>
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio10" size="mini" disabled>
+    <el-radio-group v-model="radio4" size="mini" disabled>
       <el-radio label="1" border>Option A</el-radio>
       <el-radio label="2" border>Option B</el-radio>
     </el-radio-group>
@@ -160,10 +160,10 @@ Des radios affichés comme des boutons standards.
   export default {
     data () {
       return {
-        radio7: '1',
-        radio8: '1',
-        radio9: '1',
-        radio10: '1'
+        radio1: '1',
+        radio2: '1',
+        radio3: '1',
+        radio4: '1'
       };
     }
   }
diff --git a/examples/docs/fr-FR/rate.md b/examples/docs/fr-FR/rate.md
index 0d3b1e310..57d6b1c49 100644
--- a/examples/docs/fr-FR/rate.md
+++ b/examples/docs/fr-FR/rate.md
@@ -40,7 +40,7 @@ Vous pouvez ajouter du texte à chaque score.
 
 ```html
 <el-rate
-  v-model="value3"
+  v-model="value"
   :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
   show-text>
 </el-rate>
@@ -49,7 +49,7 @@ Vous pouvez ajouter du texte à chaque score.
   export default {
     data() {
       return {
-        value3: null
+        value: null
       }
     }
   }
@@ -65,7 +65,7 @@ Vous pouvez utiliser différentes icônes pour chaque
 
 ```html
 <el-rate
-  v-model="value4"
+  v-model="value"
   :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
   void-icon-class="icon-rate-face-off"
   :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
@@ -75,7 +75,7 @@ Vous pouvez utiliser différentes icônes pour chaque
   export default {
     data() {
       return {
-        value4: null
+        value: null
       }
     }
   }
@@ -91,7 +91,7 @@ Le score peut être en lecture seule. Les demi-étoiles sont supportées.
 
 ```html
 <el-rate
-  v-model="value5"
+  v-model="value"
   disabled
   show-score
   text-color="#ff9900"
@@ -102,7 +102,7 @@ Le score peut être en lecture seule. Les demi-étoiles sont supportées.
   export default {
     data() {
       return {
-        value5: 3.7
+        value: 3.7
       }
     }
   }
diff --git a/examples/docs/fr-FR/select.md b/examples/docs/fr-FR/select.md
index 81113f62f..08068c58d 100644
--- a/examples/docs/fr-FR/select.md
+++ b/examples/docs/fr-FR/select.md
@@ -52,9 +52,9 @@ Utile lorsqu'il faut sélectionner des options parmi un large choix, affiché gr
 
 ```html
 <template>
-  <el-select v-model="value2" placeholder="Select">
+  <el-select v-model="value" placeholder="Select">
     <el-option
-      v-for="item in options2"
+      v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value"
@@ -67,7 +67,7 @@ Utile lorsqu'il faut sélectionner des options parmi un large choix, affiché gr
   export default {
     data() {
       return {
-        options2: [{
+        options: [{
           value: 'Option1',
           label: 'Option1'
         }, {
@@ -84,7 +84,7 @@ Utile lorsqu'il faut sélectionner des options parmi un large choix, affiché gr
           value: 'Option5',
           label: 'Option5'
         }],
-        value2: ''
+        value: ''
       }
     }
   }
@@ -99,7 +99,7 @@ Vous pouvez désactiver le composant lui-même.
 :::demo Ajoutez `disabled` à `el-select` pour le désactiver.
 ```html
 <template>
-  <el-select v-model="value3" disabled placeholder="Select">
+  <el-select v-model="value" disabled placeholder="Select">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -129,7 +129,7 @@ Vous pouvez désactiver le composant lui-même.
           value: 'Option5',
           label: 'Option5'
         }],
-        value3: ''
+        value: ''
       }
     }
   }
@@ -144,7 +144,7 @@ Vous pouvez ajouter un bouton pour effacer la sélection.
 :::demo Ajoutez l'attribut `clearable` à `el-select` et l'icône de fermeture s'affichera après une sélection. Notez que `clearable` ne marche qu'avec les sélecteurs à choix unique.
 ```html
 <template>
-  <el-select v-model="value4" clearable placeholder="Select">
+  <el-select v-model="value" clearable placeholder="Select">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -174,7 +174,7 @@ Vous pouvez ajouter un bouton pour effacer la sélection.
           value: 'Option5',
           label: 'Option5'
         }],
-        value4: ''
+        value: ''
       }
     }
   }
@@ -250,7 +250,7 @@ Vous pouvez définir un template HTML pour l'affichage des options.
 
 ```html
 <template>
-  <el-select v-model="value6" placeholder="Select">
+  <el-select v-model="value" placeholder="Select">
     <el-option
       v-for="item in cities"
       :key="item.value"
@@ -285,7 +285,7 @@ Vous pouvez définir un template HTML pour l'affichage des options.
           value: 'Guangzhou',
           label: 'Guangzhou'
         }],
-        value6: ''
+        value: ''
       }
     }
   }
@@ -301,9 +301,9 @@ Vous pouvez définir des groupes pour les options du menu.
 
 ```html
 <template>
-  <el-select v-model="value7" placeholder="Select">
+  <el-select v-model="value" placeholder="Select">
     <el-option-group
-      v-for="group in options3"
+      v-for="group in options"
       :key="group.label"
       :label="group.label">
       <el-option
@@ -320,7 +320,7 @@ Vous pouvez définir des groupes pour les options du menu.
   export default {
     data() {
       return {
-        options3: [{
+        options: [{
           label: 'Villes célèbres',
           options: [{
             value: 'Shanghai',
@@ -345,7 +345,7 @@ Vous pouvez définir des groupes pour les options du menu.
             label: 'Dalian'
           }]
         }],
-        value7: ''
+        value: ''
       }
     }
   }
@@ -360,7 +360,7 @@ Vous pouvez ajouter un mode de filtrage pour trouver les options désirées plus
 :::demo Ajoutez `filterable` à `el-select` pour activer le filtrage. Par défaut, Select cherchera les options dont le `label` contient la valeur du filtre. Si vous préférez une autre stratégie de filtrage, utilisez `filter-method`. C'est une `Function` qui est appelée quand la valeur change, avec pour paramètre la valeur courante.
 ```html
 <template>
-  <el-select v-model="value8" filterable placeholder="Select">
+  <el-select v-model="value" filterable placeholder="Select">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -390,7 +390,7 @@ Vous pouvez ajouter un mode de filtrage pour trouver les options désirées plus
           value: 'Option5',
           label: 'Option5'
         }],
-        value8: ''
+        value: ''
       }
     }
   }
@@ -407,7 +407,7 @@ Vous pouvez aller chercher les options sur le serveur de manière dynamique.
 ```html
 <template>
   <el-select
-    v-model="value9"
+    v-model="value"
     multiple
     filterable
     remote
@@ -416,7 +416,7 @@ Vous pouvez aller chercher les options sur le serveur de manière dynamique.
     :remote-method="remoteMethod"
     :loading="loading">
     <el-option
-      v-for="item in options4"
+      v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value">
@@ -428,8 +428,8 @@ Vous pouvez aller chercher les options sur le serveur de manière dynamique.
   export default {
     data() {
       return {
-        options4: [],
-        value9: [],
+        options: [],
+        value: [],
         list: [],
         loading: false,
         states: ["Alabama", "Alaska", "Arizona",
@@ -462,13 +462,13 @@ Vous pouvez aller chercher les options sur le serveur de manière dynamique.
           this.loading = true;
           setTimeout(() => {
             this.loading = false;
-            this.options4 = this.list.filter(item => {
+            this.options = this.list.filter(item => {
               return item.label.toLowerCase()
                 .indexOf(query.toLowerCase()) > -1;
             });
           }, 200);
         } else {
-          this.options4 = [];
+          this.options = [];
         }
       }
     }
@@ -485,14 +485,14 @@ Vous pouvez entrer des choix dans le champ de sélection qui ne sont pas incluse
 ```html
 <template>
   <el-select
-    v-model="value10"
+    v-model="value"
     multiple
     filterable
     allow-create
     default-first-option
     placeholder="Choisissez les tags de vos articles">
     <el-option
-      v-for="item in options5"
+      v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value">
@@ -504,7 +504,7 @@ Vous pouvez entrer des choix dans le champ de sélection qui ne sont pas incluse
   export default {
     data() {
       return {
-        options5: [{
+        options: [{
           value: 'HTML',
           label: 'HTML'
         }, {
@@ -514,7 +514,7 @@ Vous pouvez entrer des choix dans le champ de sélection qui ne sont pas incluse
           value: 'JavaScript',
           label: 'JavaScript'
         }],
-        value10: []
+        value: []
       }
     }
   }
diff --git a/examples/docs/zh-CN/loading.md b/examples/docs/zh-CN/loading.md
index 4e461bfe3..19d7d47fe 100644
--- a/examples/docs/zh-CN/loading.md
+++ b/examples/docs/zh-CN/loading.md
@@ -69,7 +69,7 @@
 ```html
 <template>
   <el-table
-    v-loading="loading2"
+    v-loading="loading"
     element-loading-text="拼命加载中"
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.8)"
@@ -109,7 +109,7 @@
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
         }],
-        loading2: true
+        loading: true
       };
     }
   };
@@ -133,7 +133,7 @@
   </el-button>
   <el-button
     type="primary"
-    @click="openFullScreen2">
+    @click="openFullScreen">
     服务方式
   </el-button>
 </template>
@@ -152,7 +152,7 @@
           this.fullscreenLoading = false;
         }, 2000);
       },
-      openFullScreen2() {
+      openFullScreen() {
         const loading = this.$loading({
           lock: true,
           text: 'Loading',
diff --git a/examples/docs/zh-CN/message-box.md b/examples/docs/zh-CN/message-box.md
index c4a02d15f..774d822aa 100644
--- a/examples/docs/zh-CN/message-box.md
+++ b/examples/docs/zh-CN/message-box.md
@@ -43,13 +43,13 @@
 
 ```html
 <template>
-  <el-button type="text" @click="open2">点击打开 Message Box</el-button>
+  <el-button type="text" @click="open">点击打开 Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open2() {
+      open() {
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
@@ -80,13 +80,13 @@
 
 ```html
 <template>
-  <el-button type="text" @click="open3">点击打开 Message Box</el-button>
+  <el-button type="text" @click="open">点击打开 Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open3() {
+      open() {
         this.$prompt('请输入邮箱', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
@@ -118,13 +118,13 @@
 
 ```html
 <template>
-  <el-button type="text" @click="open4">点击打开 Message Box</el-button>
+  <el-button type="text" @click="open">点击打开 Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open4() {
+      open() {
         const h = this.$createElement;
         this.$msgbox({
           title: '消息',
@@ -174,13 +174,13 @@
 
 ```html
 <template>
-  <el-button type="text" @click="open5">点击打开 Message Box</el-button>
+  <el-button type="text" @click="open">点击打开 Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open5() {
+      open() {
         this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
           dangerouslyUseHTMLString: true
         });
@@ -203,13 +203,13 @@
 
 ```html
 <template>
-  <el-button type="text" @click="open6">点击打开 Message Box</el-button>
+  <el-button type="text" @click="open">点击打开 Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open6() {
+      open() {
         this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
           distinguishCancelAndClose: true,
           confirmButtonText: '保存',
@@ -243,13 +243,13 @@
 
 ```html
 <template>
-  <el-button type="text" @click="open7">点击打开 Message Box</el-button>
+  <el-button type="text" @click="open">点击打开 Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open7() {
+      open() {
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
diff --git a/examples/docs/zh-CN/radio.md b/examples/docs/zh-CN/radio.md
index 65afe6f94..02b0a8b0d 100644
--- a/examples/docs/zh-CN/radio.md
+++ b/examples/docs/zh-CN/radio.md
@@ -33,15 +33,15 @@
 :::demo 只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
 ```html
 <template>
-  <el-radio disabled v-model="radio1" label="禁用">备选项</el-radio>
-  <el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio>
+  <el-radio disabled v-model="radio" label="禁用">备选项</el-radio>
+  <el-radio disabled v-model="radio" label="选中且禁用">备选项</el-radio>
 </template>
 
 <script>
   export default {
     data () {
       return {
-        radio1: '选中且禁用'
+        radio: '选中且禁用'
       };
     }
   }
@@ -57,7 +57,7 @@
 
 ```html
 <template>
-  <el-radio-group v-model="radio2">
+  <el-radio-group v-model="radio">
     <el-radio :label="3">备选项</el-radio>
     <el-radio :label="6">备选项</el-radio>
     <el-radio :label="9">备选项</el-radio>
@@ -68,7 +68,7 @@
   export default {
     data () {
       return {
-        radio2: 3
+        radio: 3
       };
     }
   }
@@ -84,7 +84,7 @@
 ```html
 <template>
   <div>
-    <el-radio-group v-model="radio3">
+    <el-radio-group v-model="radio1">
       <el-radio-button label="上海"></el-radio-button>
       <el-radio-button label="北京"></el-radio-button>
       <el-radio-button label="广州"></el-radio-button>
@@ -92,7 +92,7 @@
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio4" size="medium">
+    <el-radio-group v-model="radio2" size="medium">
       <el-radio-button label="上海" ></el-radio-button>
       <el-radio-button label="北京"></el-radio-button>
       <el-radio-button label="广州"></el-radio-button>
@@ -100,7 +100,7 @@
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio5" size="small">
+    <el-radio-group v-model="radio3" size="small">
       <el-radio-button label="上海"></el-radio-button>
       <el-radio-button label="北京" disabled ></el-radio-button>
       <el-radio-button label="广州"></el-radio-button>
@@ -108,7 +108,7 @@
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio6" disabled size="mini">
+    <el-radio-group v-model="radio4" disabled size="mini">
       <el-radio-button label="上海"></el-radio-button>
       <el-radio-button label="北京"></el-radio-button>
       <el-radio-button label="广州"></el-radio-button>
@@ -121,10 +121,10 @@
   export default {
     data () {
       return {
+        radio1: '上海',
+        radio2: '上海',
         radio3: '上海',
-        radio4: '上海',
-        radio5: '上海',
-        radio6: '上海'
+        radio4: '上海'
       };
     }
   }
@@ -138,21 +138,21 @@
 ```html
 <template>
   <div>
-    <el-radio v-model="radio7" label="1" border>备选项1</el-radio>
-    <el-radio v-model="radio7" label="2" border>备选项2</el-radio>
+    <el-radio v-model="radio1" label="1" border>备选项1</el-radio>
+    <el-radio v-model="radio1" label="2" border>备选项2</el-radio>
   </div>
   <div style="margin-top: 20px">
-    <el-radio v-model="radio8" label="1" border size="medium">备选项1</el-radio>
-    <el-radio v-model="radio8" label="2" border size="medium">备选项2</el-radio>
+    <el-radio v-model="radio2" label="1" border size="medium">备选项1</el-radio>
+    <el-radio v-model="radio2" label="2" border size="medium">备选项2</el-radio>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio9" size="small">
+    <el-radio-group v-model="radio3" size="small">
       <el-radio label="1" border>备选项1</el-radio>
       <el-radio label="2" border disabled>备选项2</el-radio>
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio10" size="mini" disabled>
+    <el-radio-group v-model="radio4" size="mini" disabled>
       <el-radio label="1" border>备选项1</el-radio>
       <el-radio label="2" border>备选项2</el-radio>
     </el-radio-group>
@@ -163,10 +163,10 @@
   export default {
     data () {
       return {
-        radio7: '1',
-        radio8: '1',
-        radio9: '1',
-        radio10: '1'
+        radio1: '1',
+        radio2: '1',
+        radio3: '1',
+        radio4: '1'
       };
     }
   }
diff --git a/examples/docs/zh-CN/rate.md b/examples/docs/zh-CN/rate.md
index 5a78bbc19..2298613a1 100644
--- a/examples/docs/zh-CN/rate.md
+++ b/examples/docs/zh-CN/rate.md
@@ -38,7 +38,7 @@
 :::demo 为组件设置 `show-text` 属性会在右侧显示辅助文字。通过设置 `texts` 可以为每一个分值指定对应的辅助文字。`texts` 为一个数组，长度应等于最大值 `max`。
 ```html
 <el-rate
-  v-model="value3"
+  v-model="value"
   show-text>
 </el-rate>
 
@@ -46,7 +46,7 @@
   export default {
     data() {
       return {
-        value3: null
+        value: null
       }
     }
   }
@@ -61,7 +61,7 @@
 :::demo 设置`icon-classes`属性可以自定义对应 3 个不同分段的图标。本例还使用`void-icon-class`指定了未选中时的图标类名。
 ```html
 <el-rate
-  v-model="value4"
+  v-model="value"
   :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
   void-icon-class="icon-rate-face-off"
   :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
@@ -71,7 +71,7 @@
   export default {
     data() {
       return {
-        value4: null
+        value: null
       }
     }
   }
@@ -86,7 +86,7 @@
 :::demo 为组件设置 `disabled` 属性表示组件为只读，支持小数分值。此时若设置 `show-score`，则会在右侧显示目前的分值。可以提供 `score-template` 作为显示模板，模板为一个包含了 `{value}` 的字符串，`{value}` 会被解析为分值。
 ```html
 <el-rate
-  v-model="value5"
+  v-model="value"
   disabled
   show-score
   text-color="#ff9900"
@@ -97,7 +97,7 @@
   export default {
     data() {
       return {
-        value5: 3.7
+        value: 3.7
       }
     }
   }
diff --git a/examples/docs/zh-CN/select.md b/examples/docs/zh-CN/select.md
index 8282d35e3..0e429b216 100644
--- a/examples/docs/zh-CN/select.md
+++ b/examples/docs/zh-CN/select.md
@@ -51,9 +51,9 @@
 :::demo 在`el-option`中，设定`disabled`值为 true，即可禁用该选项
 ```html
 <template>
-  <el-select v-model="value2" placeholder="请选择">
+  <el-select v-model="value" placeholder="请选择">
     <el-option
-      v-for="item in options2"
+      v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value"
@@ -66,7 +66,7 @@
   export default {
     data() {
       return {
-        options2: [{
+        options: [{
           value: '选项1',
           label: '黄金糕'
         }, {
@@ -83,7 +83,7 @@
           value: '选项5',
           label: '北京烤鸭'
         }],
-        value2: ''
+        value: ''
       }
     }
   }
@@ -98,7 +98,7 @@
 :::demo 为`el-select`设置`disabled`属性，则整个选择器不可用
 ```html
 <template>
-  <el-select v-model="value3" disabled placeholder="请选择">
+  <el-select v-model="value" disabled placeholder="请选择">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -128,7 +128,7 @@
           value: '选项5',
           label: '北京烤鸭'
         }],
-        value3: ''
+        value: ''
       }
     }
   }
@@ -143,7 +143,7 @@
 :::demo 为`el-select`设置`clearable`属性，则可将选择器清空。需要注意的是，`clearable`属性仅适用于单选。
 ```html
 <template>
-  <el-select v-model="value4" clearable placeholder="请选择">
+  <el-select v-model="value" clearable placeholder="请选择">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -173,7 +173,7 @@
           value: '选项5',
           label: '北京烤鸭'
         }],
-        value4: ''
+        value: ''
       }
     }
   }
@@ -248,7 +248,7 @@
 :::demo 将自定义的 HTML 模板插入`el-option`的 slot 中即可。
 ```html
 <template>
-  <el-select v-model="value6" placeholder="请选择">
+  <el-select v-model="value" placeholder="请选择">
     <el-option
       v-for="item in cities"
       :key="item.value"
@@ -283,7 +283,7 @@
           value: 'Guangzhou',
           label: '广州'
         }],
-        value6: ''
+        value: ''
       }
     }
   }
@@ -298,9 +298,9 @@
 :::demo 使用`el-option-group`对备选项进行分组，它的`label`属性为分组名
 ```html
 <template>
-  <el-select v-model="value7" placeholder="请选择">
+  <el-select v-model="value" placeholder="请选择">
     <el-option-group
-      v-for="group in options3"
+      v-for="group in options"
       :key="group.label"
       :label="group.label">
       <el-option
@@ -317,7 +317,7 @@
   export default {
     data() {
       return {
-        options3: [{
+        options: [{
           label: '热门城市',
           options: [{
             value: 'Shanghai',
@@ -342,7 +342,7 @@
             label: '大连'
           }]
         }],
-        value7: ''
+        value: ''
       }
     }
   }
@@ -357,7 +357,7 @@
 :::demo 为`el-select`添加`filterable`属性即可启用搜索功能。默认情况下，Select 会找出所有`label`属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个`filter-method`来实现。`filter-method`为一个`Function`，它会在输入值发生变化时调用，参数为当前输入值。
 ```html
 <template>
-  <el-select v-model="value8" filterable placeholder="请选择">
+  <el-select v-model="value" filterable placeholder="请选择">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -387,7 +387,7 @@
           value: '选项5',
           label: '北京烤鸭'
         }],
-        value8: ''
+        value: ''
       }
     }
   }
@@ -402,7 +402,7 @@
 ```html
 <template>
   <el-select
-    v-model="value9"
+    v-model="value"
     multiple
     filterable
     remote
@@ -411,7 +411,7 @@
     :remote-method="remoteMethod"
     :loading="loading">
     <el-option
-      v-for="item in options4"
+      v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value">
@@ -423,8 +423,8 @@
   export default {
     data() {
       return {
-        options4: [],
-        value9: [],
+        options: [],
+        value: [],
         list: [],
         loading: false,
         states: ["Alabama", "Alaska", "Arizona",
@@ -457,13 +457,13 @@
           this.loading = true;
           setTimeout(() => {
             this.loading = false;
-            this.options4 = this.list.filter(item => {
+            this.options = this.list.filter(item => {
               return item.label.toLowerCase()
                 .indexOf(query.toLowerCase()) > -1;
             });
           }, 200);
         } else {
-          this.options4 = [];
+          this.options = [];
         }
       }
     }
@@ -478,14 +478,14 @@
 ```html
 <template>
   <el-select
-    v-model="value10"
+    v-model="value"
     multiple
     filterable
     allow-create
     default-first-option
     placeholder="请选择文章标签">
     <el-option
-      v-for="item in options5"
+      v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value">
@@ -497,7 +497,7 @@
   export default {
     data() {
       return {
-        options5: [{
+        options: [{
           value: 'HTML',
           label: 'HTML'
         }, {
@@ -507,7 +507,7 @@
           value: 'JavaScript',
           label: 'JavaScript'
         }],
-        value10: []
+        value: []
       }
     }
   }