Skip to content

Commit f0e219b

Browse files
authored
Merge pull request #259 from vuejs/master
获取官方更新
2 parents f9cbdee + 15511c9 commit f0e219b

File tree

2 files changed

+39
-1
lines changed

2 files changed

+39
-1
lines changed

src/guide/class-and-style.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,44 @@ However, this can be a bit verbose if you have multiple conditional classes. Tha
111111
<div v-bind:class="[{ active: isActive }, errorClass]">
112112
```
113113

114+
### With Components
115+
116+
> This section assumes knowledge of [Vue Components](components.html). Feel free to skip it and come back later.
117+
118+
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.
119+
120+
For example, if you declare this component:
121+
122+
``` js
123+
Vue.component('my-component', {
124+
template: '<p class="foo bar">Hi</p>'
125+
})
126+
```
127+
128+
Then add some classes when using it:
129+
130+
``` html
131+
<my-component class="baz boo"></my-component>
132+
```
133+
134+
The rendered HTML will be:
135+
136+
``` html
137+
<p class="foo bar baz boo">Hi</p>
138+
```
139+
140+
The same is true for class bindings:
141+
142+
``` html
143+
<my-component v-bind:class="{ active: isActive }"></my-component>
144+
```
145+
146+
When `isActive` is truthy, the rendered HTML will be:
147+
148+
``` html
149+
<div class="foo bar active"></div>
150+
```
151+
114152
## Binding Inline Styles
115153

116154
### Object Syntax

themes/vue/layout/partials/community_dropdown.ejs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55
<li><a href="http://forum.vuejs.org" class="nav-link" target="_blank">Forum</a></li>
66
<li><a href="https://gitter.im/vuejs/vue" class="nav-link" target="_blank">Chat</a></li>
77
<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>
99
</ul>
1010
</li>

0 commit comments

Comments
 (0)