v-ifで条件分岐をしよう!(Vue入門③例題付き) (16)
Vue.js

v-modelで様々な入力フォームを作る

はじめに 前回はv-modelの修飾子を見ていきました。今回は複数行やチェックボックス、ラジオボタンなどのパターンを見ていきます。 複数行の入力フォーム inputでは実現できなかった複数行のフォームはtextareaを使う事で実現可能です。 また、textareaで入力した値の改行まで反映させたい場合は、クリックイベントなどを使って処理を書いてあげる必要があります。参考:https://segateway.com/archives/360#toc3 サンプルコード チェックボックス チェックボックス1つ型はboolean型! チェックボックス1つのパターンだとv-modelで出力される値boolean型(trueかfalse)になります。 複数のチェックボックスは配列として! 複数のチェックボックスを作った場合は、配列の値として入力値が表示されます。下の動画ではチェックボックスでチェックした値が下の配列の中で表示されています。 ソースコード ラジオボタンで入力する v-modelを使う事でラジオボタンを使った双方向バインディングも可能です。ラジオボタンで入力された値を出してくれます。 ソースコード プルダウン型で入力する プルダウン型でもv-modelにて双方向バインディングが可能です。プルダウンで選んだ値が出力されます。 ソースコード …

Read More
Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Color
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Compare
Wishlist 0
Open wishlist page Continue shopping