diff --git "a/\347\253\240\350\266\205\347\276\244/6-1.md" "b/\347\253\240\350\266\205\347\276\244/6-1.md"
new file mode 100644
index 0000000000000000000000000000000000000000..d6e77234213afa346693bee72c09f04644ece0e1
--- /dev/null
+++ "b/\347\253\240\350\266\205\347\276\244/6-1.md"
@@ -0,0 +1,193 @@
+Vue的第五次课
+1. Class 与 Style 绑定
+    class style  如class绑定对象 :class="{}" class可以绑定对象 字符串 数组 且还可以在定义一个class即能绑定一个class和定义一个class其他的不生效
+    在data中打开ture或者关闭false 再定义样式 在style中定义样式 也可以用computed定义一个变量传入匿名函数给class绑定在调用定义的属性
+```
+ <style>
+        .ming{
+            background-color: green;
+            font-size: 40px;
+        }
+        .tian{
+            color: red;
+        }
+    </style>
+
+
+    <div id="app">
+        <span :class="apple" class="tian">看我表演躺好</span>
+    </div>
+
+
+
+     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        let app=new Vue({
+            el:'#app',
+            data:{
+                haha:true,
+                heihei:false
+            },
+            computed:{
+                apple:function (){
+                    return {
+                        ming:true
+                    }
+                }
+            }
+        })
+    </script>
+
+```
+
+2. 数组语法 相当于传入一个变量在data中定义变量传入即 :class="[变量名称(可以有多个)]" 然后在data中定义或定义一个计算机属性的变量也可以传入
+
+```
+   <style>
+        .ming{
+            background-color: green;
+            font-size: 40px;
+        }
+        .tian{
+            color: red;
+        }
+    </style>
+
+
+    <div id="app">
+        <span :class="[pig,apple]" class="tian">看我表演躺好</span>
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        let app=new Vue({
+            el:'#app',
+            data:{
+                haha:true,
+                heihei:false,
+                pig:['你是','妹妹还是哥哥'],
+
+            },
+            computed:{
+                apple:function (){
+                    return {
+                        ming:true
+                    }
+                }
+            }
+        })
+    </script>
+
+    
+```
+
+
+3. 用在组件上 即将根组件定义的class内容和在html根组件标签添加class的内容组合并不会被html根主键标签添加class的内容覆盖
+```
+       <div id="app">
+        <todo :class="{heihei}"></todo>     
+    </div>
+
+
+  
+
+
+
+     Vue.component("todo",{
+            template:`<span :class="haha"><H1>hi</H1></span>`
+        })
+
+            let app=new Vue({
+            el:'#app',
+            data:{
+                haha:true,
+                heihei:true,
+              
+
+            },
+
+
+            组合结果:  <todo :class="{heihei,haha}"><h1>你好</h1></todo>   
+```
+
+4. 绑定内联样式 在:style="{}"属性进行定义同class一样也可以在写一个style进行添加样式属性但是相同的属性会被最近的一次更改覆盖 fontSize书写要小驼峰或者用“font-size”形式
+```
+
+
+    <div id="app">
+        <span :class="{haha,heihei}" :style='csspattern'  style="background-color:royalblue;">看我表演躺好</span>     
+    </div>
+
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+    
+        let app=new Vue({
+            el:'#app',
+            data:{
+                haha:true,
+                heihei:false,
+                csspattern:{
+                fontSize:"80px",
+                color:'red'
+             }
+        }        
+     })
+    </script>
+```
+5. v-if v-else v-show 用法
+```
+  <div id="app">
+        <span v-if='haha' title="正确">这是</span>  
+        <span v-else='haha' title="错误">这是</span> 
+        <h1 v-show="ok">Hello!</h1> 
+    </div>
+
+
+        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+    
+        let app=new Vue({
+            el:'#app',
+            data:{
+                haha:true,
+                ok:true
+             }   
+     })
+    </script>
+
+```
+6.  key 管理可复用的元素 若不添加key 用户名<input>标签内容被被继承密码的<input>
+
+```
+ <div id="app">
+        <span v-if='see'>
+            <label for="">用户名:</label>
+            <input type="text" placeholder="请输入用户名" key='username-input'>
+        </span>
+        <span v-else='see'>
+            <label for="">密码:</label>
+            <input type="text" placeholder="请输入密码" key='password-input'>
+        </span>
+        <button @click='btnclick'>转变一下标签哦</button>
+
+
+        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        let app=new Vue({
+            el:'#app',
+            data:{
+                see:true
+            },
+            methods:{
+                btnclick:function(){
+                    return this.see=false
+                }
+            }
+
+        })
+
+```
+