回答編集履歴
4
a
test
CHANGED
|
@@ -1,8 +1,40 @@
|
|
|
1
|
-
#
|
|
1
|
+
# 結論
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
> cssにてdisplay:noneで非表示にした項目に対し
|
|
6
|
+
|
|
7
|
+
v-showを用いて表示の切り替えができるか。
|
|
8
|
+
|
|
9
|
+
v-showは上からdisplay:noneを付けるだけで
|
|
10
|
+
|
|
11
|
+
cssで書かれたdisplay:noneを無効にはできないのでしょうか。
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
出来ないようです。Vue.js開発者のEvan Youが本質問と同様の質問に以下のように回答をしています。
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
> No, because depending on different elements, there could be different default display properly, block is not the only possible value, so we simply set it to an empty value when v-show value is true. Also, v-show has to take into account inline display properties like style="display: inline" v-show="xxx".
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
[https://github.com/vuejs/vue/issues/4238#issuecomment-261580863](https://github.com/vuejs/vue/issues/4238#issuecomment-261580863)
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
その上で、以下、回答です。
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
> cssをdisplay:blockなどで上書きすれば動くが、よりスマートな方法があるか知りたいです。
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
よりスマートかどうかはわからないですが、`custom directive`を作って対応するか、`display:block`で上書きするクラスを追加するかとかですかね。
|
|
36
|
+
|
|
37
|
+
|
|
6
38
|
|
|
7
39
|
以下のコードでは`custom directive`をローカルインストールして使っていますけど、グローバルインストールでもOKです。
|
|
8
40
|
|
3
a
test
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
|
|
21
21
|
<p class="original" :class="{myStyle: isVisible}" v-show="isVisible">Hello</p>
|
|
22
22
|
|
|
23
|
-
<p class="
|
|
23
|
+
<p class="original" v-customShow="isVisible">World</p>
|
|
24
24
|
|
|
25
25
|
<button @click="isVisible = !isVisible">Toggle</button>
|
|
26
26
|
|
|
@@ -93,7 +93,3 @@
|
|
|
93
93
|
|
|
94
94
|
|
|
95
95
|
```
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
Demo => [https://codesandbox.io/s/q3y7o4w7yj](https://codesandbox.io/s/q3y7o4w7yj)
|
2
a
test
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
<div id="app">
|
|
20
20
|
|
|
21
|
-
<p
|
|
21
|
+
<p class="original" :class="{myStyle: isVisible}" v-show="isVisible">Hello</p>
|
|
22
22
|
|
|
23
23
|
<p class="test" v-customShow="isVisible">World</p>
|
|
24
24
|
|
1
あ
test
CHANGED
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
`custom directive`を作って対応するか、`display:block`で上書きするクラスを追加するかとかですかね。
|
|
6
|
+
|
|
7
|
+
以下のコードでは`custom directive`をローカルインストールして使っていますけど、グローバルインストールでもOKです。
|
|
6
8
|
|
|
7
9
|
|
|
8
10
|
|