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
+40-40Lines changed: 40 additions & 40 deletions
Original file line number
Diff line number
Diff line change
@@ -1,20 +1,20 @@
1
-
# Class and Style Bindings
1
+
# クラスとスタイルのバインディング
2
2
3
-
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 only 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.
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`.
You can have multiple classes toggled by having more fields in the object. In addition, the `:class`directive can also co-exist with the plain `class`attribute. So given the following template:
@@ -23,7 +23,7 @@ You can have multiple classes toggled by having more fields in the object. In ad
23
23
></div>
24
24
```
25
25
26
-
And the following data:
26
+
次のようなデータがあったとすると:
27
27
28
28
```js
29
29
data() {
@@ -34,15 +34,15 @@ data() {
34
34
}
35
35
```
36
36
37
-
It will render:
37
+
このように描画されます:
38
38
39
39
```html
40
40
<divclass="static active"></div>
41
41
```
42
42
43
-
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"`.
43
+
`isActive`もしくは`hasError`が変化するとき、クラスリストはそれに応じて更新されます。例えば、`hasError`が`true` になった場合、クラスリストは `"static active text-danger"` になります。
44
44
45
-
The bound object doesn't have to be inline:
45
+
束縛されるオブジェクトはインラインでなくてもかまいません:
46
46
47
47
```html
48
48
<div:class="classObject"></div>
@@ -59,7 +59,7 @@ data() {
59
59
}
60
60
```
61
61
62
-
This will render the same result. We can also bind to a [computed property](computed.md) that returns an object. This is a common and powerful pattern:
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:
When you use the `class`attribute on a custom component with a single root element, those classes will be added to this element. Existing classes on this element will not be overwritten.
When `isActive`is truthy, the rendered HTML will be:
158
+
`isActive`が真と評価されるときは、以下の HTML が描画されます:
159
159
160
160
```html
161
161
<pclass="foo bar active">Hi</p>
162
162
```
163
163
164
-
If your component has multiple root elements, you would need to define which component will receive this class. You can do this using `$attrs`component property:
The object syntax for `:style`is pretty straightforward - it looks almost like CSS, except it's a JavaScript object. You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names:
When you use a CSS property that requires [vendor prefixes](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) in `:style`, for example `transform`, Vue will automatically detect and add appropriate prefixes to the applied styles.
This will only render the last value in the array which the browser supports. In this example, it will render `display: flex`for browsers that support the unprefixed version of flexbox.
> This guide assumes that you have already read the [Composition API Introduction](composition-api-introduction.html) and [Reactivity Fundamentals](reactivity-fundamentals.html). Read that first if you are new to Composition API.
5
+
> このガイドは[コンポジション API の導入](composition-api-introduction.html)と[リアクティブの基礎](reactivity-fundamentals.html)を既に読んでいることを想定しています。 コンポジション API に初めて触れる方は、まずそちらを読んでみてください。
6
6
7
-
## Arguments
7
+
## 引数
8
8
9
-
When using the `setup`function, it will take two arguments:
9
+
`setup`関数を使う時、2 つの引数を取ります:
10
10
11
11
1.`props`
12
12
2.`context`
13
13
14
-
Let's dive deeper into how each argument can be used.
14
+
それぞれの引数がどのように使われるのか、深く掘り下げてみましょう。
15
15
16
-
### Props
16
+
### プロパティ
17
17
18
-
The first argument in the `setup`function is the `props`argument. Just as you would expect in a standard component, `props` inside of a `setup` function are reactive and will be updated when new props are passed in.
If you need to destructure your props, you can do this safely by utilizing the [toRefs](reactivity-fundamentals.html#destructuring-reactive-state)inside of the `setup` function.
The second argument passed to the `setup`function is the `context`. The `context`is a normal JavaScript object that exposes three component properties:
`attrs`and`slots`are stateful objects that are always updated when the component itself is updated. This means you should avoid destructuring them and always reference properties as `attrs.x`or`slots.x`. Also note that unlike `props`,`attrs`and`slots`are **not** reactive. If you intend to apply side effects based on `attrs`or`slots`changes, you should do so inside an `onUpdated`lifecycle hook.
@@ -125,11 +125,11 @@ If `setup` returns an object, the properties on the object can be accessed in th
125
125
</script>
126
126
```
127
127
128
-
Note that[refs](../api/refs-api.html#ref)returned from `setup` are [automatically unwrapped](../api/refs-api.html#access-in-templates) when accessed in the template so you shouldn't use `.value`in templates.
**Inside `setup()`, `this`won't be a reference to the current active instance**Since `setup()`is called before other component options are resolved, `this` inside `setup()`will behave quite differently from `this` in other options. This might cause confusions when using `setup()`along other Options API.
151
+
**`setup()` 内では、`this`は現在のアクティブなインスタンスへの参照にはなりません。**`setup()`は他のコンポーネントオプションが解決される前に呼び出されるので、`setup()`内の`this` は他のオプション内の `this`とは全く異なる振る舞いをします。 これは、`setup()`を他のオプション API と一緒に使った場合に混乱を引き起こす可能性があります。
0 commit comments