You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/class-and-style.md
+30-28Lines changed: 30 additions & 28 deletions
Original file line number
Diff line number
Diff line change
@@ -3,30 +3,31 @@ title: Class 与 Style 绑定
3
3
type: guide
4
4
order: 6
5
5
---
6
+
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用` v-bind` 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 `v-bind `用于` class `和 `style `时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
6
7
7
-
A common need for data binding is manipulating an element's class list and its inline styles. Since they are both attributes, we can use `v-bind` to handle them: we just need to calculate a final string with our expressions. However, meddling with string concatenation is annoying and error-prone. For this reason, Vue provides special enhancements when `v-bind` is used with `class` and `style`. In addition to strings, the expressions can also evaluate to objects or arrays.
8
8
9
-
## Binding HTML Classes
9
+
## 绑定 HTML Class
10
10
11
-
### Object Syntax
11
+
### 对象语法
12
12
13
-
We can pass an object to `v-bind:class`to dynamically toggle classes:
The above syntax means the presence of the `active`class will be determined by the [truthiness](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) of the data property `isActive`.
20
+
我们可以传给 v-bind:class 一个对象，以动态地切换 class。注意 v-bind:class 指令可以与普通的 class 特性共存
20
21
21
-
You can have multiple classes toggled by having more fields in the object. In addition, the `v-bind:class`directive can also co-exist with the plain `class` attribute. So given the following template:
22
+
我们也可以在对象中传入多个属性用来动态切换多个class.注意 `v-bind:class`指令可以与普通的 class 特性共存.如下模板:
When`isActive`or`hasError`changes, the class list will be updated accordingly. For example, if `hasError`becomes`true`, the class list will become`"static active text-danger"`.
45
+
当`isActive`或者`hasError`变化时, class列表将相应地更新。例如，如果 `hasError`的值为`true`, class列表将变为`"static active text-danger"`.
This will render the same result. We can also bind to a [computed property](computed.html) that returns an object. This is a common and powerful pattern:
61
62
62
63
```html
63
64
<divv-bind:class="classObject"></div>
@@ -77,9 +78,9 @@ computed: {
77
78
}
78
79
```
79
80
80
-
### Array Syntax
81
+
### 数组语法
81
82
82
-
We can pass an array to `v-bind:class` to apply a list of classes:
83
+
我们可以把一个数组传给 `v-bind:class`，以应用一个 class 列表：
83
84
84
85
```html
85
86
<divv-bind:class="[activeClass, errorClass]">
@@ -91,31 +92,31 @@ data: {
91
92
}
92
93
```
93
94
94
-
Which will render:
95
+
渲染为:
95
96
96
97
```html
97
98
<divclass="active text-danger"></div>
98
99
```
99
100
100
-
If you would like to also toggle a class in the list conditionally, you can do it with a ternary expression:
This will always apply `errorClass`, but will only apply `activeClass` when `isActive` is `true`.
107
-
108
-
However, this can be a bit verbose if you have multiple conditional classes. That's why it's also possible to use the object syntax inside array syntax:
The object syntax for `v-bind:style` is pretty straightforward - it looks almost like CSS, except it's a JavaScript object. You can use either camelCase or kebab-case for the CSS property names:
When you use a CSS property that requires vendor prefixes in `v-bind:style`, for example `transform`, Vue will automatically detect and add appropriate prefixes to the applied styles.
0 commit comments