回答編集履歴

1

追記

2021/09/29 12:35

投稿

shiketa
shiketa

スコア4061

test CHANGED
@@ -9,3 +9,153 @@
9
9
  * [https://vuetifyjs.com/ja/components/dialogs/](https://vuetifyjs.com/ja/components/dialogs/)
10
10
 
11
11
  * [https://vuetifyjs.com/ja/api/v-dialog/](https://vuetifyjs.com/ja/api/v-dialog/)
12
+
13
+
14
+
15
+ ----
16
+
17
+
18
+
19
+ 追記。
20
+
21
+
22
+
23
+ ----
24
+
25
+
26
+
27
+
28
+
29
+ >> >vue側の条件分岐でtrueになったとき」の部分は提示されていない、という認識でいいですね。
30
+
31
+
32
+
33
+ > →はい、認識あっております。
34
+
35
+
36
+
37
+ >> >vue側の条件分岐でtrueになったとき」が``if (hogehoge) { ... }`だとします。そうなのであれば、`if (hogehoge) { ... ; this.showContent = true; ...}`とすればいいのでは?
38
+
39
+
40
+
41
+ > →すみません、私の理解が乏しいのでコードに書いてみました。下記の考えであってますでしょうか?m(_ _)m
42
+
43
+
44
+
45
+ [どこかのHelloWorld](https://qiita.com/hyaroy_pg/items/ecb60ee3971e059507bd)を改変して、想像の範囲でやりたいであろうことを書いてみました。hoge.htmlに保存すれば動くはずです。
46
+
47
+
48
+
49
+ > メソッドに条件分岐をつけているのですが
50
+
51
+
52
+
53
+ 「メソッド」はdoChange()、「分岐条件」は`this.inputNumber % 2 == 0`と読み替えてください。
54
+
55
+
56
+
57
+ ```html
58
+
59
+ <!DOCTYPE html>
60
+
61
+ <html lang="ja">
62
+
63
+
64
+
65
+ <head>
66
+
67
+ <meta charset="UTF-8">
68
+
69
+ <script src="https://cdn.jsdelivr.net/npm/vue"></script>
70
+
71
+ <title>Title</title>
72
+
73
+ </head>
74
+
75
+
76
+
77
+ <body>
78
+
79
+ <div id="app">
80
+
81
+ <div> testVal: {{ testVal }} </div>
82
+
83
+ <div> inputNumber: <input type="number" v-model="inputNumber" @change="doChange"> / {{inputNumber}} </div>
84
+
85
+ <div>showContent: {{showContent}}</div>
86
+
87
+ <div>history: {{history}}</div>
88
+
89
+ <div id="modal">
90
+
91
+ <button v-on:click="openModal">Click</button>
92
+
93
+ <div class="overlay" v-show="showContent" v-on:click="closeModal">
94
+
95
+ <div class="content">
96
+
97
+ <p>これがモーダルウィンドウです。</p>
98
+
99
+ <button v-on:click="closeModal">close</button>
100
+
101
+ </div>
102
+
103
+ </div>
104
+
105
+ </div>
106
+
107
+ </div>
108
+
109
+ </body>
110
+
111
+ <script>
112
+
113
+ const app = new Vue({
114
+
115
+ el: '#app',
116
+
117
+ data: {
118
+
119
+ testVal: 'Hello World!',
120
+
121
+ showContent: false,
122
+
123
+ inputNumber: 0,
124
+
125
+ history: []
126
+
127
+ },
128
+
129
+ methods: {
130
+
131
+ openModal() {
132
+
133
+ this.showContent = true
134
+
135
+ },
136
+
137
+ closeModal() {
138
+
139
+ this.showContent = false
140
+
141
+ },
142
+
143
+ doChange() {
144
+
145
+ this.showContent = this.inputNumber % 2 == 0
146
+
147
+ this.history.push(this.inputNumber, this.showContent)
148
+
149
+ }
150
+
151
+ }
152
+
153
+ });
154
+
155
+ </script>
156
+
157
+
158
+
159
+ </html>
160
+
161
+ ```