diff --git "a/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/2021_06_01_Vue\347\254\254\345\205\255\346\254\241\350\257\276\347\250\213.md" "b/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/2021_06_01_Vue\347\254\254\345\205\255\346\254\241\350\257\276\347\250\213.md"
new file mode 100644
index 0000000000000000000000000000000000000000..a35940a5d41975c1f1cabda9cd09a47c04048005
--- /dev/null
+++ "b/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/2021_06_01_Vue\347\254\254\345\205\255\346\254\241\350\257\276\347\250\213.md"
@@ -0,0 +1,161 @@
+# `· v-for ·` 把一个数组对应为一组元素
+
+## 回顾 v-for 的使用
+
+```
+    <div id="app">
+        <ul>
+            <!-- 括弧里面的顺序不能颠倒, (x,y)  -->
+            <!-- x: 遍历的数组元素 - y: 默认的索引 -->
+            <li v-for="(item,index) in lists">
+                {{ index + 1 }} - {{ item.name }}
+            </li>
+        </ul>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app = new Vue({
+            el: '#app',
+            data(){
+                return {
+                    lists: [
+                        {
+                            id: 1,
+                            name: '伟强'
+                        },
+                        {
+                            id: 2,
+                            name: '拥有'
+                        },
+                        {
+                            id: 3,
+                            name: '抽丝剥茧'
+                        },
+                        {
+                            id: 4,
+                            name: '困死'
+                        }
+                    ]
+                }
+            }
+        })
+    </script>
+```
+
+## v-for可以遍历对象
+
+```
+    <div id="app">
+        <table>
+            <tr v-for="(val,key,index) in objs">
+                <td>
+                    
+                    {{index+1}} - {{ key }} : {{ val }}
+                </td>
+            </tr>
+        </table>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app = new Vue({
+            el: '#app',
+            data(){
+                return {
+                    objs: {
+                        age: 33,
+                        nickname: '小黑猪',
+                        name: '秘密',
+                        score: 78,
+                        class: '软件技术2班-2019',
+                        school: '闽西职业技术学院'
+                    }
+                }
+            }
+        })
+    </script>
+```
+
+## 将数组id偶数的元素高亮
+
+```
+
+    <div id="app">
+        <label for="">添加到任务雷暴: </label>
+        <input type="text" v-model="newItem"><input type="button" value="添加" @click="addToList()">
+        <ul>
+            <li v-for="(item, index) of  lists" >
+                <span v-if="(index+1) % 2 === 0" :class="classObject">
+                    {{ index + 1 }} - {{ item.todoItem }}
+                </span>
+                <span v-else>
+                    {{ index + 1 }} - {{ item.todoItem }}
+                </span>
+            </li>
+        </ul>
+        <input type="text" v-model="newText">
+
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app = new Vue({
+            el: '#app',
+            data(){
+                return {
+                    newItem: '',
+                    newText: '',
+                    classObject:{
+                        bgColor: true
+                    },
+                    lists:[
+                        {
+                            id: 1,
+                            todoItem: '刷牙'
+                        }
+                        ,
+                        {
+                            id: 2,
+                            todoItem: '洗脸'
+                        }
+                        ,
+                        {
+                            id: 3,
+                            todoItem: '肚子疼'
+                        }
+                        ,
+                        {
+                            id: 4,
+                            todoItem: '我圆润了许多'
+                        }
+                    ],
+                }
+            },
+            methods:{
+                addToList: function(){
+                    // 创建添加对象
+                    let obj = {
+                        id: this.lists.length + 1,
+                        todoItem: this.newItem
+                    }
+
+                    // 对添加的文本框进行检查
+                    if(this.newItem != ''){
+                        this.lists.push(obj)
+                        this.newText = 'add is ok.'
+                    } else {
+                        this.newText = '添加失败'
+                    }
+
+                    console.log(this.newItem);
+                },
+
+            },
+            computed:{
+                eachItem:function(){
+                    if(this.lists.id % 2 === 0){
+                        this.classObject.bgColor = true
+                    } 
+                }
+            }
+        })
+    </script>
+```
\ No newline at end of file
diff --git "a/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/img/2021-6-2 14-41-41.JPG" "b/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/img/2021-6-2 14-41-41.JPG"
new file mode 100644
index 0000000000000000000000000000000000000000..cb5dd7feeb60b4f8e9a773eb9ee667130b9c1db3
Binary files /dev/null and "b/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/img/2021-6-2 14-41-41.JPG" differ
diff --git "a/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/img/2021-6-2 14-41-46.JPG" "b/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/img/2021-6-2 14-41-46.JPG"
new file mode 100644
index 0000000000000000000000000000000000000000..76fcd77c57c71010335c29927bfc1498c7854e11
Binary files /dev/null and "b/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/img/2021-6-2 14-41-46.JPG" differ
diff --git "a/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/img/2021-6-2 14-59-31.JPG" "b/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/img/2021-6-2 14-59-31.JPG"
new file mode 100644
index 0000000000000000000000000000000000000000..cfb64e08382724381bdb511c7c9a558edd8a372a
Binary files /dev/null and "b/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/img/2021-6-2 14-59-31.JPG" differ
diff --git "a/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/img/2021-6-2 15-2-24.JPG" "b/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/img/2021-6-2 15-2-24.JPG"
new file mode 100644
index 0000000000000000000000000000000000000000..ee754dffd848d529e66dcd9e89b16d05e9138ef4
Binary files /dev/null and "b/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/img/2021-6-2 15-2-24.JPG" differ
diff --git "a/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/img/2021-6-2 15-24-54.JPG" "b/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/img/2021-6-2 15-24-54.JPG"
new file mode 100644
index 0000000000000000000000000000000000000000..2a7dc36f434c1b72d464e5f7dfc768747055d86e
Binary files /dev/null and "b/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/img/2021-6-2 15-24-54.JPG" differ
diff --git "a/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/img/2021-6-2 15-35-16.JPG" "b/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/img/2021-6-2 15-35-16.JPG"
new file mode 100644
index 0000000000000000000000000000000000000000..715b93ea2eb44aca0ef41879e90be9bf71dff816
Binary files /dev/null and "b/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/img/2021-6-2 15-35-16.JPG" differ
diff --git "a/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/img/2021-6-2 15-7-30.JPG" "b/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/img/2021-6-2 15-7-30.JPG"
new file mode 100644
index 0000000000000000000000000000000000000000..9d4f63603e763d141d20f762afd48d8899386455
Binary files /dev/null and "b/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/img/2021-6-2 15-7-30.JPG" differ
diff --git "a/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/\347\273\203\344\271\240/2.html" "b/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/\347\273\203\344\271\240/2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..36839f971c31a0ff6bdb7c03f15ac224d1c9e73e
--- /dev/null
+++ "b/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/\347\273\203\344\271\240/2.html"
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div id="app">
+        <table>
+            <tr v-for="(val,key,index) in objs">
+                <td>
+                    
+                    {{index+1}} - {{ key }} : {{ val }}
+                </td>
+            </tr>
+        </table>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app = new Vue({
+            el: '#app',
+            data(){
+                return {
+                    objs: {
+                        age: 33,
+                        nickname: '小黑猪',
+                        name: '秘密',
+                        score: 78,
+                        class: '软件技术2班-2019',
+                        school: '闽西职业技术学院'
+                    }
+                }
+            }
+        })
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/\347\273\203\344\271\240/3.html" "b/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/\347\273\203\344\271\240/3.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d9ff27809daf784fbba11142df7ec3f1661897d2
--- /dev/null
+++ "b/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/\347\273\203\344\271\240/3.html"
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .bgColor{
+            background-color: antiquewhite;
+        }
+    </style>
+</head>
+<body>
+    <div id="app">
+        <label for="">添加到任务雷暴: </label>
+        <input type="text" v-model="newItem"><input type="button" value="添加" @click="addToList()">
+        <ul>
+            <li v-for="(item, index) of  lists" >
+                <span v-if="(index+1) % 2 === 0" :class="classObject">
+                    {{ index + 1 }} - {{ item.todoItem }}
+                </span>
+                <span v-else>
+                    {{ index + 1 }} - {{ item.todoItem }}
+                </span>
+            </li>
+        </ul>
+        <input type="text" v-model="newText">
+
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app = new Vue({
+            el: '#app',
+            data(){
+                return {
+                    newItem: '',
+                    newText: '',
+                    classObject:{
+                        bgColor: true
+                    },
+                    lists:[
+                        {
+                            id: 1,
+                            todoItem: '刷牙'
+                        }
+                        ,
+                        {
+                            id: 2,
+                            todoItem: '洗脸'
+                        }
+                        ,
+                        {
+                            id: 3,
+                            todoItem: '肚子疼'
+                        }
+                        ,
+                        {
+                            id: 4,
+                            todoItem: '我圆润了许多'
+                        }
+                    ],
+                }
+            },
+            methods:{
+                addToList: function(){
+                    // 创建添加对象
+                    let obj = {
+                        id: this.lists.length + 1,
+                        todoItem: this.newItem
+                    }
+
+                    // 对添加的文本框进行检查
+                    if(this.newItem != ''){
+                        this.lists.push(obj)
+                        this.newText = 'add is ok.'
+                    } else {
+                        this.newText = '添加失败'
+                    }
+
+                    console.log(this.newItem);
+                },
+
+            },
+            computed:{
+                eachItem:function(){
+                    if(this.lists.id % 2 === 0){
+                        this.classObject.bgColor = true
+                    } 
+                }
+            }
+        })
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/\347\273\203\344\271\240/index.html" "b/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/\347\273\203\344\271\240/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..70fa54addeb7e2b79d0526e5c3998cf473324ea5
--- /dev/null
+++ "b/\346\236\227\344\274\237\345\274\272/2021_06_02_Vue\347\254\254\344\270\203\346\254\241\350\257\276\347\250\213/\347\273\203\344\271\240/index.html"
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div id="app">
+        <ul>
+            <!-- 括弧里面的顺序不能颠倒, (x,y)  -->
+            <!-- x: 遍历的数组元素 - y: 默认的索引 -->
+            <li v-for="(item,index) in lists">
+                {{ index + 1 }} - {{ item.name }}
+            </li>
+        </ul>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app = new Vue({
+            el: '#app',
+            data(){
+                return {
+                    lists: [
+                        {
+                            id: 1,
+                            name: '伟强'
+                        },
+                        {
+                            id: 2,
+                            name: '拥有'
+                        },
+                        {
+                            id: 3,
+                            name: '抽丝剥茧'
+                        },
+                        {
+                            id: 4,
+                            name: '困死'
+                        }
+                    ]
+                }
+            }
+        })
+    </script>
+</body>
+</html>
\ No newline at end of file