diff --git "a/\345\217\266\345\270\270\346\230\245/2021-6-1.md" "b/\345\217\266\345\270\270\346\230\245/2021-6-1.md"
new file mode 100644
index 0000000000000000000000000000000000000000..35fe261f595a986d2d9cfb0756557148f10b0b52
--- /dev/null
+++ "b/\345\217\266\345\270\270\346\230\245/2021-6-1.md"
@@ -0,0 +1,53 @@
+# vuejs第五次课 天气⛅ 六一儿童节快乐哦 愿你童心未泯
+## class与style绑定
++ v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组
+
+## 绑定HTML class
++ 对象语法：传给 v-bind:class 一个对象，以动态地切换 class ↓
+```
+<div v-bind:class="{ active: isActive }"></div>
+```
+注意：上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 truthiness
+
++ ↑进阶版：你可以在对象中传入更多字段来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class attribute 共存。当有如下模板 ↓
+```
+<div
+  class="static"
+  v-bind:class="{ active: isActive, 'text-danger': hasError }"
+></div>
+```
+和如下data ↓
+```
+data: {
+  isActive: true,
+  hasError: false
+}
+```
+结果渲染为 ↓
+```
+<div class="static active"></div>
+```
+
++ 数组语法:我们可以把一个数组传给 v-bind:class，以应用一个 class 列表 ↓
+```
+<div v-bind:class="[activeClass, errorClass]"></div>
+```
+```
+data: {
+  activeClass: 'active',
+  errorClass: 'text-danger'
+}
+```
+渲染为 ↓
+```
+<div class="active text-danger"></div>
+```
+如果你也想根据条件切换列表中的 class，可以用三元表达式 ↓
+```
+<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
+```
+注：在数组语法中也可以使用对象语法哦 ↓ 可以解决多个条件class时的繁琐问题
+```
+<div v-bind:class="[{ active: isActive }, errorClass]"></div>
+```
+# 每日一言：很喜欢大哥说的一句话：《哦！》
\ No newline at end of file