それっぽくフォームのHTMLを用意

この後の処理も考えてマスタッシュも含めて、挙動の違いを見るためにリンクも3種類用意してみた。

こんな感じの適当なフォーム。

<div id="apps" class="app">
  <div class="wrap">
    <form>
      <table>
        <tr>
          <td>label</td>
          <td>input</td>
          <td>binding</td>
        </tr>
        <tr>
          <td>text</td>
          <td>
            <!--  通常のtext要素  -->
            <input type="text" placeholder="氏名" v-model="name">
          </td>
          <td>{{ name }}</td>
        </tr>
        <tr>
          <td>number</td>
          <td>
            <!--  parseFloat() で解釈できない場合は、もとの値が返却される  -->
            <input type="number" v-model="age">
          </td>
          <td>{{ age }}</td>
        </tr>
        <tr>
          <td>radio</td>
          <td>
            <label for="male">
              <input type="radio" id="male" value="male" v-model="sex">male
            </label>
            <label for="female">
              <input type="radio" id="female" value="female" v-model="sex">female
            </label>
          </td>
          <td>{{ sex }}</td>
        </tr>
        <tr>
          <td>check</td>
          <td>
            <label for="hobby1">
              <input type="checkbox" id="hobby1" value="hobby1" v-model="hobby">hobby1
            </label>
            <label for="hobby2">
              <input type="checkbox" id="hobby2" value="hobby2" v-model="hobby">hobby2
            </label>
            <label for="hobby3">
              <input type="checkbox" id="hobby3" value="hobby3" v-model="hobby">hobby3
            </label>
          </td>
          <td>{{ hobby }}</td>
        </tr>
        <tr>
          <td>select</td>
          <td>
            <select v-model="favorite">
              <option disabled value="">選択</option>
              <option>A</option>
              <option>B</option>
              <option>C</option>
            </select>
            
          </td>
          <td>{{ favorite }}</td>
        </tr>
        <tr>
          <td>select</td>
          <td>
            <select v-model="favorite2" multiple>
              <option>A:複数選択可能</option>
              <option>B:複数選択可能</option>
              <option>C:複数選択可能</option>
            </select>
            
          </td>
          <td>{{ favorite2 }}</td>
        </tr>
        <tr>
          <td>textarea</td>
          <td><textarea v-model="message"></textarea></td>
          <td><p style="white-space: pre-line;">{{ message }}</p></td>
        </tr>
      </table>
      <div class="cv">
        <button>ボタン</button>
        <a href="#">リンク</a>
        <input type="submit" value="送信"/>
      </div>
    </form>
  </div>
</div>

この状態のがこれ

See the Pen vue_formEvent01 by Kotacr (@qurimuk) on CodePen.0

何の処理もしてないので、ガワだけですね。

デザインを当ててみる

このままだと寂しいので、フォームにちょっと細工を加えようということで、
UI libraryのelementを入れていい感じに整形。

See the Pen vue_formEvent02 by Kotacr (@qurimuk) on CodePen.0

たったこれだけで、見た目と一緒に色々な制限がかけられて嬉しい限り。
余計な記述を書かなくてすみますね。

リンク3種置いたけど、ややこしくなりそうだったので削除。

ElementとかのUIライブラリ

今回はとりあえずelementを利用してみたが、いくつもあるようだ。ここにvueのUIまとめ記事まとめ記事を発見したので備忘的にリンク。何をどんな風に作りたいかで選ぶと良さそう。好き嫌いもあるしね。

Elementのサイト見ながら、とりあえず見た目を整形できたので、とりあえず終了!

ちょっと他のライブラリも試してみたいが…、まぁ行き詰まったら考えます。

Similar Posts