File tree Expand file tree Collapse file tree 2 files changed +19
-0
lines changed Expand file tree Collapse file tree 2 files changed +19
-0
lines changed Original file line number Diff line number Diff line change @@ -1561,6 +1561,7 @@ type: api
1561
1561
```
1562
1562
1563
1563
- ** 参照:** [ 条件付きレンダリング - v-else] ( /guide/conditional.html#v-else )
1564
+ - ** See also:** [ Conditional Rendering - Component caveat] ( /guide/conditional.html#Component-caveat )
1564
1565
1565
1566
### v-for
1566
1567
Original file line number Diff line number Diff line change @@ -67,6 +67,24 @@ Vue.js では、同じことを達成するために、`v-if` ディレクティ
67
67
68
68
` v-else ` 要素は、` v-if ` または ` v-show ` の直後になければなりません。それ以外の場合は認識されません。
69
69
70
+ ### Component caveat
71
+
72
+ When used with components and ` v-show ` , ` v-else ` doesn't get applied properly due to directives priorities. So instead of doing this:
73
+
74
+ ``` html
75
+ <custom-component v-show =" condition" ></custom-component >
76
+ <p v-else >This could be a component too</p >
77
+ ```
78
+
79
+ Replace the ` v-else ` with another ` v-show ` :
80
+
81
+ ``` html
82
+ <custom-component v-show =" condition" ></custom-component >
83
+ <p v-show =" !condition" >This could be a component too</p >
84
+ ```
85
+
86
+ It does work as intended with ` v-if ` .
87
+
70
88
## v-if 対 v-show
71
89
72
90
` v-if ` ブロックが切り替えられる時、Vue.js は ` v-if ` 内部のテンプレートコンテンツもデータバインディングまたは子コンポーネントを含むことができるため、部分的なコンパイル / teardown 処理を実行する必要があります。` v-if ` は、イベントリスナと子コンポーネント内部の条件ブロックが適切に破棄され、そして切り替えられるまでの間再作成されるため、"リアル"な条件レンダリングです。
You can’t perform that action at this time.
0 commit comments