From 983b9f1537c33d1a31b7f2bd5b04f7ddfa3d267a Mon Sep 17 00:00:00 2001 From: xiaoyou <2232705454@qq.com> Date: Tue, 1 Jun 2021 10:48:26 +0800 Subject: [PATCH] =?UTF-8?q?class=E4=B8=8Estyle=E7=BB=91=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2021-06-01-vue.md" | 78 +++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 "\346\270\270\346\265\267\346\236\227/2021-06-01-vue.md" diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-01-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-01-vue.md" new file mode 100644 index 0000000..91bc610 --- /dev/null +++ "b/\346\270\270\346\265\267\346\236\227/2021-06-01-vue.md" @@ -0,0 +1,78 @@ +# Class与style绑定 + + +### 对象语法 + +我们可以传给 v-bind:class 一个对象，以动态地切换 class： +``` +
+``` +``` +
+ +``` ++ 对象语法也就是在v-bind:class绑定一个对象的时候，里面的值将影响最终取值， ++ 比如如果 这里isActive的值为true 则会被渲染成class='active' 如果为false , 则 不会存在. ++ 一般情况 {A：xx ,B:xx}的写法是json格式写法，只能以key/value的形式被识别，而不会像例子中一样直接被处理，如果value的值为true则，key绑定在class里面 + + +### 数组语法 + + ++ 数组语法 ++ 我们可以把一个数组传给 v-bind:class ，以应用一个 class 列表： +``` +
+data: { + activeClass: 'active', + errorClass: 'text-danger' +} +``` ++ 渲染为: +``` +
+``` ++ 如果你也想根据条件切换列表中的 class ，可以用三元表达式： +``` +
+``` +此例始终添加 errorClass ，但是只有在 isActive 是 true 时添加 activeClass 。 + +不过，当有多个条件 class 时这样写有些繁琐。可以在数组语法中使用对象语法： +``` +
+``` + +### 绑定内敛样式 + ++ 使用 v-bind:style 可以给元素绑定内联样式,方法与:class类似,也有对象语法和数组语法,看起来很直接在元素上写CSS: + +``` + + + + + 示例 + + +
+
+
+ + + + +``` + ++ css属性用驼峰命名或短横分割命名 \ No newline at end of file -- Gitee