no way to compare when less than two revisions
差分
このページの2つのバージョン間の差分を表示します。
— | programming:web_development:javascript:vuejs:tips:snippets [2019/05/10] (現在) – 作成 ikatakos | ||
---|---|---|---|
行 1: | 行 1: | ||
+ | ======スニペット - Vue.js====== | ||
+ | 記事を作成した理由の80%くらいは、CodePenの埋め込みがDokuwikiでも使えるのかのテストだったり。 | ||
+ | |||
+ | |||
+ | =====フォーム===== | ||
+ | |||
+ | ====チェックボックス==== | ||
+ | |||
+ | dataに適当な配列(checkedItems)を持ち、チェックボックスのv-modelにバインディングすると、選択されたチェックボックスのvalueと、配列の要素が連動する。 | ||
+ | |||
+ | ☑aaa | ||
+ | □bbb | ||
+ | ☑ccc | ||
+ | |||
+ | どちらを操作しても、もう一方に反映される。ただし、javascript上でcheckboxのpropをいじった場合は配列に反映されないので、jsからは基本的に配列を操作した方がよい。 | ||
+ | |||
+ | これを使うと、1つも選択してない場合にボタンを無効にしたり、全て選択ボタンを実装したり等が比較的すっきり書ける。 | ||
+ | |||
+ | < | ||
+ | <p class=" | ||
+ | < | ||
+ | Vue.js Checkbox List & Button Snippet</ | ||
+ | on <a href=" | ||
+ | </p> | ||
+ | <script async src=" | ||
+ | </ |