File tree Expand file tree Collapse file tree 3 files changed +40
-2
lines changed
themes/vue/layout/partials Expand file tree Collapse file tree 3 files changed +40
-2
lines changed Original file line number Diff line number Diff line change @@ -109,6 +109,44 @@ data: {
109
109
<div v-bind:class =" [{ active: isActive }, errorClass]" >
110
110
```
111
111
112
+ ### With Components
113
+
114
+ > This section assumes knowledge of [ Vue Components] ( components.html ) . Feel free to skip it and come back later.
115
+
116
+ When you use the ` class ` attribute on a custom component, those classes will be added to the component's root element. Existing classes on this element will not be overwritten.
117
+
118
+ For example, if you declare this component:
119
+
120
+ ``` js
121
+ Vue .component (' my-component' , {
122
+ template: ' <p class="foo bar">Hi</p>'
123
+ })
124
+ ```
125
+
126
+ Then add some classes when using it:
127
+
128
+ ``` html
129
+ <my-component class =" baz boo" ></my-component >
130
+ ```
131
+
132
+ The rendered HTML will be:
133
+
134
+ ``` html
135
+ <p class =" foo bar baz boo" >Hi</p >
136
+ ```
137
+
138
+ The same is true for class bindings:
139
+
140
+ ``` html
141
+ <my-component v-bind:class =" { active: isActive }" ></my-component >
142
+ ```
143
+
144
+ When ` isActive ` is truthy, the rendered HTML will be:
145
+
146
+ ``` html
147
+ <div class =" foo bar active" ></div >
148
+ ```
149
+
112
150
## 绑定内联样式
113
151
114
152
### 对象语法
Original file line number Diff line number Diff line change @@ -286,7 +286,7 @@ Vue.component('child', {
286
286
287
287
### 动态 Props
288
288
289
- 类似于用 ` v-bind ` 绑定 HTML 特性到一个表达式,也可以用 ` v-bind ` 绑定动态 props 到父组件的数据 。每当父组件的数据变化时,也会传导给子组件 :
289
+ 类似于用 ` v-bind ` 绑定 HTML 特性到一个表达式,也可以用 ` v-bind ` 动态绑定 props 的值到父组件的数据中 。每当父组件的数据变化时,该变化也会传导给子组件 :
290
290
291
291
``` html
292
292
<div >
Original file line number Diff line number Diff line change 5
5
<li ><a href =" http://forum.vuejs.org" class =" nav-link" target =" _blank" >论坛</a ></li >
6
6
<li ><a href =" https://gitter.im/vuejs/vue" class =" nav-link" target =" _blank" >聊天室</a ></li >
7
7
<li ><a href =" https://twitter.com/vuejs" class =" nav-link" target =" _blank" >Twitter</a ></li >
8
- <li ><a href =" https://vuejobs .com/?ref_source=vue " class =" nav-link" target =" _blank" >Jobs</a ></li >
8
+ <li ><a href =" https://vuejsjob .com/?ref=vuejs " class =" nav-link" target =" _blank" >Jobs</a ></li >
9
9
</ul >
10
10
</li >
You can’t perform that action at this time.
0 commit comments