diff --git "a/\351\273\204\345\230\211\351\222\260/601class\343\200\201style\347\273\221\345\256\232.md" "b/\351\273\204\345\230\211\351\222\260/601class\343\200\201style\347\273\221\345\256\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ea331a8d41b49862b0afd57b7c8434b96e4dc244
--- /dev/null
+++ "b/\351\273\204\345\230\211\351\222\260/601class\343\200\201style\347\273\221\345\256\232.md"
@@ -0,0 +1,57 @@
+## 2021-6-1
+
+### 绑定HTML class
+```
+    <style>
+        .istrue{
+            color: cadetblue;
+        }
+    </style>
+
+    <div id="app">
+        <span :class="acc">
+            落入星空辽阔，落入丛山万座
+        </span>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app = new Vue({
+            el:'#app',
+            data:{
+                acc:{
+                    istrue:true
+                    }
+
+            }
+        })
+    </script>
+```
+```
+    <style>
+        .acc{
+            color: cadetblue;
+        }
+        .bcc{
+            color: cornflowerblue;
+        }
+    </style>
+</head>
+<body>
+    <div id="app">
+        <span :class="[acc,bcc]">
+            落入星空辽阔，落入丛山万座
+        </span>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app = new Vue({
+            el:'#app',
+            data:{
+                acc:"acc",
+                bcc:"bcc"
+            }
+        })
+    </script>
+```
\ No newline at end of file
diff --git "a/\351\273\204\345\230\211\351\222\260/602\345\210\227\350\241\250\346\270\262\346\237\223.md" "b/\351\273\204\345\230\211\351\222\260/602\345\210\227\350\241\250\346\270\262\346\237\223.md"
new file mode 100644
index 0000000000000000000000000000000000000000..66b2d9cb02d6d89457d3914e764598aab81435c7
--- /dev/null
+++ "b/\351\273\204\345\230\211\351\222\260/602\345\210\227\350\241\250\346\270\262\346\237\223.md"
@@ -0,0 +1,75 @@
+## 2021-6-2
+
+### 条件渲染
+
+#### v-if指令
+用于条件性地渲染一块内容
+
+#### v-else
+v-else元素必须紧跟在带v-if或者v-else-if的元素后面，否则不会被识别
+
+#### v-else-if
+
+#### 用key管理可复用的元素
+两个元素完全独立，不复用
+
+#### v-show
+只是简单地切换元素的 CSS property display
+
+注意：v-show不支持<template>，也不支持v-else
+
+### 列表渲染
+```
+    <div id="app">
+        <label>List：</label><input type="text" v-model="memberName"><input type="button" value="add" @click="add()">
+        <ul>
+            <li v-for="(member,index) in list" :class="cssClass">
+                {{member.name}}
+                <input type="button" value="remove" @click="remove(index)">  
+            </li>
+        </ul>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app = new Vue({
+            el:"#app",
+            data:{
+                memberName:'',
+                list:[
+                    {
+                        id:1,
+                        name:"scoups"
+                    },
+                    {
+                        id:1,
+                        name:"woozi"
+                    },
+                    {
+                        id:1,
+                        name:"joshua"
+                    },
+                    {
+                        id:1,
+                        name:"jun"
+                    },
+                ],
+                cssClass:{
+                    doublemember:true
+                }
+            },
+            methods:{
+                add:function(){
+                    let obj = {
+                        id:this.list.length+1,
+                        name:this.memberName
+                    }
+                    this.list.push(obj);
+                    this.memberName = '';
+                },
+                remove:function(index){
+                    this.list.splice(index,1);
+                }
+            }
+        })
+    </script>
+```
\ No newline at end of file
diff --git "a/\351\273\204\345\230\211\351\222\260/604\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\351\273\204\345\230\211\351\222\260/604\344\272\213\344\273\266\345\244\204\347\220\206.md"
new file mode 100644
index 0000000000000000000000000000000000000000..bd8e70d64c7ec686bedd4f82cb995dd12a0851d6
--- /dev/null
+++ "b/\351\273\204\345\230\211\351\222\260/604\344\272\213\344\273\266\345\244\204\347\220\206.md"
@@ -0,0 +1,34 @@
+### 2021-6-4
+
+1. 监听事件
+使用v-on来监听DOM事件
+2. 事件处理方法，调用函数处理事件
+3. 事件修饰符
+```
+    <div id="app">
+        <input type="button" value="click" @click.once="num">
+        <label>{{content}}</label>
+
+        <input type="button" value="click1" @keyup.enter="en">
+
+
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app = new Vue({
+            el:"#app",
+            data:{
+                content:0
+            },
+            methods:{
+                num:function(){
+                    this.content+=1
+                },
+                en:function(event){
+                    console.log(event);
+                }
+            }
+        })
+    </script>
+```
\ No newline at end of file
diff --git "a/\351\273\204\345\230\211\351\222\260/605\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232.md" "b/\351\273\204\345\230\211\351\222\260/605\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b70bc5165cd5ae5e883704dffa5e5b35b34b8b1e
--- /dev/null
+++ "b/\351\273\204\345\230\211\351\222\260/605\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232.md"
@@ -0,0 +1,70 @@
+## 2021-6-5
+
+### v-model
+
+v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
+
++ text 和 textarea 元素使用 value property 和 input 事件；
++ checkbox 和 radio 使用 checked property 和 change 事件；
++ select 字段将 value 作为 prop 并将 change 作为事件。
+
+```
+    <div id="app">
+文本输入框
+        <input type="text" v-model.lazy='content' @input='readtext'>
+        <br>
+        {{content}}
+
+        <br>
+
+多选框
+        <input type="checkbox" v-model="checked" value="1" @change="readcheck">scoups
+        <input type="checkbox" v-model="checked" value="2" @change="readcheck">joshua
+        <input type="checkbox" v-model="checked" value="3" @change="readcheck">woozi
+        <input type="checkbox" v-model="checked" value="4" @change="readcheck">woowon
+        <input type="checkbox" v-model="checked" value="5" @change="readcheck">jun
+
+        <br>
+单选框
+        <input type="radio" v-model='chose' @change='readradio' value="1">scoups
+        <input type="radio" v-model='chose' @change='readradio' value="2">joshua
+        <input type="radio" v-model='chose' @change='readradio' value="3">woozi
+
+        <br>
+
+下拉框
+        <select name="" id=""  v-model='optext' @change='readop'>
+            <option value="1">SEVENTEEN</option>
+            <option value="2">郑星源</option>
+            <option value="3">speXial</option>
+        </select>
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app = new Vue({
+            el:'#app',
+            data:{
+                content:'',
+                checked:[],
+                chose:'',
+                optext:""
+            },
+            methods:{
+                readtext:function(){
+                    console.log(this.content);
+                },
+                readcheck:function(){
+                    console.log(this.checked);
+                },
+                readradio:function(){
+                    console.log(this.chose);
+                },
+                readop:function(){
+                    console.log(this.optext);
+                }
+            }
+        })
+    </script>
+```
\ No newline at end of file
diff --git "a/\351\273\204\345\230\211\351\222\260/img/class\343\200\201style/1.png" "b/\351\273\204\345\230\211\351\222\260/img/class\343\200\201style/1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7b313f881b138a45e45e6eb2b3ec9f6bf2b73346
Binary files /dev/null and "b/\351\273\204\345\230\211\351\222\260/img/class\343\200\201style/1.png" differ
