Javascript/vue/基本 - 変更履歴

Admin: /* javascriptを動作させる */

2019-03-07T15:20:54Z

‎javascriptを動作させる

2019-03-07T15:20:41Z

‎javascriptを動作させる

2019-03-07T15:20:31Z

‎javascriptを動作させる

2018-05-16T08:25:49Z

2018-05-15T01:02:37Z

‎複数checkboxの扱い方

2018-05-11T09:23:38Z

‎tableでcheckboxを使う場合

2018-05-11T09:23:05Z

‎複数checkboxの扱い方

2018-05-11T09:00:22Z

2018-05-09T01:00:58Z

‎ボタン無効化

2018-05-08T08:02:03Z

‎テキストif出力

@@ 行182: / 行182: @@
 ==javascriptを動作させる==
 <pre>
- {{ 1 + 1 }}
+{{ 1 + 1 }}
 </pre>
 カッコ内はjavascriptが動作する

@@ 行183: / 行183: @@
 <pre>
   {{ 1 + 1 }}
 </pre>

@@ 行181: / 行181: @@
 ==javascriptを動作させる==
   {{ 1 + 1 }}
 カッコ内はjavascriptが動作する

@@ 行73: / 行73: @@
 ==複数checkboxの扱い方==
   <nowiki><input type="checkbox" id="hoge1" value="hoge1" v-model="checkedNames">
- <label for="hoge1">hoge1</label>
+<label for="hoge1">hoge1</label>
- <input type="checkbox" id="hoge2" value="hoge2" v-model="checkedNames">
+<input type="checkbox" id="hoge2" value="hoge2" v-model="checkedNames">
- <label for="hoge2">hoge2</label>
+<label for="hoge2">hoge2</label>
- <input type="checkbox" id="hoge3" value="hoge3" v-model="checkedNames">
+<input type="checkbox" id="hoge3" value="hoge3" v-model="checkedNames">
- <label for="hoge3">hoge3</label></nowiki>
+<label for="hoge3">hoge3</label></nowiki>
   data: {

@@ 行84: / 行84: @@
 ==tableでcheckboxを使う場合==
-  <tr v-for="item in messages" >
+  <tr v-for="user in users" >
-    <td><input type="checkbox" v-model="checkedNames[item.id]" :id="item.id" value="true"></td>
+    <td><input type="checkbox" v-model="checkedNames[user.id]" :id="user.id" value="true"></td>
   </tr>

←前の版		2018年5月11日 (金) 09:00時点における版
行70:		行70:

	v-ifでも同様		v-ifでも同様
		+
		+	==複数checkboxの扱い方==
		+	<nowiki><input type="checkbox" id="hoge1" value="hoge1" v-model="checkedNames">
		+	<label for="hoge1">hoge1</label>
		+	<input type="checkbox" id="hoge2" value="hoge2" v-model="checkedNames">
		+	<label for="hoge2">hoge2</label>
		+	<input type="checkbox" id="hoge3" value="hoge3" v-model="checkedNames">
		+	<label for="hoge3">hoge3</label></nowiki>
		+
		+	data: {
		+	checkedNames: []
		+	}

	==foreach==		==foreach==

@@ 行153: / 行153: @@
 ==ボタン無効化==
   <button v-bind:disabled="isDisabled">Button</button>
 ==デバッグ==
   console.log('hoge');
 ブラウザの開発ツールのコンソールに表示される

@@ 行23: / 行23: @@
 </div>
 <div v-else>no data</div></nowiki>
 ==inputボックス出力==