差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

この比較画面にリンクする

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 ​ ⇔  checkedItems:​ ["​aaa",​ "​ccc"​]
 +  ☑ccc
 +
 +どちらを操作しても、もう一方に反映される。ただし、javascript上でcheckboxのpropをいじった場合は配列に反映されないので、jsからは基本的に配列を操作した方がよい。
 +
 +これを使うと、1つも選択してない場合にボタンを無効にしたり、全て選択ボタンを実装したり等が比較的すっきり書ける。
 +
 +<​html>​
 +<p class="​codepen"​ data-height="​380"​ data-theme-id="​0"​ data-default-tab="​js,​result"​ data-user="​ikatakos"​ data-slug-hash="​WBwoEj"​ style="​height:​ 265px; box-sizing: border-box; display: flex; align-items:​ center; justify-content:​ center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="​Vue.js Checkbox List &​amp;​amp;​ Button Snippet">​
 +  <​span>​See the Pen <a href="​https://​codepen.io/​ikatakos/​pen/​WBwoEj/">​
 +  Vue.js Checkbox List &amp; Button Snippet</​a>​ by ikatakos (<a href="​https://​codepen.io/​ikatakos">​@ikatakos</​a>​)
 +  on <a href="​https://​codepen.io">​CodePen</​a>​.</​span>​
 +</p>
 +<script async src="​https://​static.codepen.io/​assets/​embed/​ei.js"></​script>​
 +</​html>​
programming/web_development/javascript/vuejs/tips/snippets.txt · 最終更新: 2019/05/10 by ikatakos
CC Attribution 4.0 International
Driven by DokuWiki Recent changes RSS feed Valid CSS Valid XHTML 1.0