diff --git "a/\345\274\240\346\236\227\347\272\242/2021-06-01(Class \344\270\216 Style \347\273\221\345\256\232\343\200\201\346\235\241\344\273\266\346\270\262\346\237\223).md" "b/\345\274\240\346\236\227\347\272\242/2021-06-01(Class \344\270\216 Style \347\273\221\345\256\232\343\200\201\346\235\241\344\273\266\346\270\262\346\237\223).md"
new file mode 100644
index 0000000000000000000000000000000000000000..fe59f41fc2b082f85a2ee69db60775c0a6d27b38
--- /dev/null
+++ "b/\345\274\240\346\236\227\347\272\242/2021-06-01(Class \344\270\216 Style \347\273\221\345\256\232\343\200\201\346\235\241\344\273\266\346\270\262\346\237\223).md"	
@@ -0,0 +1,108 @@
+# Class 与 Style 绑定
+
+操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
+
+
+## 绑定HTML Class
+
+### 对象、数组语法 用在组件上
+```
+<div id="app">
+        
+        <span :class="classParam">
+
+        </span>
+        <span :class="{active:jeje,text:'lala'}">
+
+        </span>
+        <span :class="list">
+
+        </span>
+        <span :class=[classOne,classTwo]>
+
+        </span>
+        <span :class="classVar">
+
+        </span>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        let app=new Vue({
+            el:'#app',
+            data:{
+                //对象语法
+                classParam:{
+                    aaa:false,
+                    yyy:true
+                },
+                //数组语法
+                list:['kkk','zzz'],
+
+                jeje:false,
+
+                classOne:'kkk',
+                classTwo:'lll'
+            },
+            //用在组件上
+            computed:{
+                classVar:function(){
+                    if(1>2){
+                        return{
+                            haha:true
+                        }
+                    }else{
+                        return{
+                            aaa:true
+                        }
+                    }
+                }
+            }
+        })
+    </script>
+```
+
+## 绑定内联样式
+
+### 对象、数组语法
+```
+<div id="app">
+
+        <span :style="styleObject">
+            看看有什么
+        </span>
+        <span :style="[baseStyles, overridingStyles]">
+            kank
+        </span>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        let app = new Vue({
+            el: '#app',
+            data: {
+                //对象语法
+                styleObject: {
+                    color: 'red',
+                    fontSize: '13px'
+                },
+                //数组语法
+                baseStyles:{
+                    fontSize:'50px'
+                },
+                overridingStyles:{
+                    color:'blue'
+                }
+            },
+        })
+    </script>
+```
+
+# 条件渲染
+
+v-if vs v-show
+v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
+
+v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
+
+相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
+
+一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
\ No newline at end of file