質問編集履歴

2

内容調整

2019/06/24 02:08

投稿

Nitta
Nitta

スコア96

test CHANGED
File without changes
test CHANGED
@@ -16,17 +16,7 @@
16
16
 
17
17
  <head>
18
18
 
19
-   <meta charset="utf-8">
19
+ (中略)
20
-
21
- <title>sample</title>
22
-
23
- <script src="https://unpkg.com/vue"></script>
24
-
25
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
26
-
27
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
28
-
29
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
30
20
 
31
21
  </head>
32
22
 

1

内容調整

2019/06/24 02:08

投稿

Nitta
Nitta

スコア96

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,17 @@
16
16
 
17
17
  <head>
18
18
 
19
- 中略
19
+   <meta charset="utf-8">
20
+
21
+ <title>sample</title>
22
+
23
+ <script src="https://unpkg.com/vue"></script>
24
+
25
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
26
+
27
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
28
+
29
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
20
30
 
21
31
  </head>
22
32
 
@@ -84,130 +94,110 @@
84
94
 
85
95
  <button type="button" id="data_send" class="btn btn-primary center-block" >送 信</button>
86
96
 
97
+ <script type="text/javascript">
98
+
99
+ $(function(){
100
+
101
+  $('#data_send').click(function(){
102
+
103
+   alert($('#list li').text());
104
+
105
+  });
106
+
107
+ });
108
+
109
+ </script>
110
+
111
+ <div>
112
+
87
113
  <script>
88
114
 
115
+ var app=new Vue({
116
+
117
+ el: '#app',
118
+
119
+ data: {
120
+
121
+ text: "",
122
+
123
+ editIndex: -1,
124
+
125
+ items: ["タスク1","タスク2","タスク3"]
126
+
127
+
128
+
129
+ },
130
+
131
+ computed: {
132
+
133
+ changeButtonText(){
134
+
135
+ return this.editIndex === -1 ? "追加" : "編集";
136
+
137
+ }
138
+
139
+ },
140
+
141
+ methods: {
142
+
143
+   //追加,削除
144
+
145
+ setItems() {
146
+
147
+ if(this.editIndex === -1){
148
+
149
+ this.items.push(this.text);
150
+
151
+ } else {
152
+
153
+ this.items.splice(this.editIndex, 1, this.text);
154
+
155
+ }
156
+
157
+ this.cancel();
158
+
159
+ },
160
+
161
+   //キャンセル
162
+
89
- $(functon(){
163
+   cancel(){
90
-
91
-
92
-
164
+
93
-  $('#data_send').click(function(){
165
+ this.text = "";
166
+
94
-
167
+ this.editIndex = -1;
168
+
169
+ },
170
+
95
-   //ここでalertが上がらない!
171
+ //編集
172
+
96
-
173
+ edit(index){
174
+
175
+ this.editIndex = index;
176
+
177
+ this.text = this.items[index];
178
+
179
+ this.$refs.editor.focus();
180
+
181
+ },
182
+
183
+   //削除
184
+
185
+ remove(index){
186
+
97
-   alert($('#list li').text());
187
+ this.items.splice(index, 1);
188
+
98
-
189
+ }
190
+
191
+ }
192
+
99
-  });
193
+ })
100
-
101
-
102
-
103
- });
104
-
105
-
106
194
 
107
195
  </script>
108
196
 
109
- <div>
110
-
111
- <script>
112
-
113
- var app=new Vue({
114
-
115
- el: '#app',
116
-
117
- data: {
118
-
119
- text: "",
120
-
121
-
122
-
123
- editIndex: -1,
124
-
125
-
126
-
127
- items: [
128
-
129
- "タスク1",
130
-
131
- "タスク2",
132
-
133
-    "タスク3"
134
-
135
- ]
136
-
137
- },
138
-
139
- computed: {
140
-
141
- changeButtonText(){
142
-
143
- return this.editIndex === -1 ? "追加" : "編集";
144
-
145
- }
146
-
147
- },
148
-
149
- methods: {
150
-
151
-   //追加,削除
152
-
153
- setItems() {
154
-
155
- if(this.editIndex === -1){
156
-
157
- this.items.push(this.text);
158
-
159
- } else {
160
-
161
-
162
-
163
- this.items.splice(this.editIndex, 1, this.text);
164
-
165
- }
166
-
167
- this.cancel();
168
-
169
- },
170
-
171
-   //キャンセル
172
-
173
-   cancel(){
174
-
175
- this.text = "";
176
-
177
- this.editIndex = -1;
178
-
179
- },
180
-
181
- //編集
182
-
183
- edit(index){
184
-
185
- this.editIndex = index;
186
-
187
- this.text = this.items[index];
188
-
189
- this.$refs.editor.focus();
190
-
191
- },
192
-
193
-   //削除
194
-
195
- remove(index){
196
-
197
- this.items.splice(index, 1);
198
-
199
- }
200
-
201
-
202
-
203
- }
204
-
205
- })
206
-
207
- </script>
208
-
209
197
  </body>
210
198
 
211
199
  </html>
212
200
 
201
+
202
+
213
203
  ```