vue.js入門_15_フォーム入力バインディング

by s9iwork

HTML

<div id="app">
  <h2>v-model利用時はvalue属性などは無視される</h2>
  <p>{{ message }}</p>
  <input type="text" v-model="message" value="fugafuga">

  <h2>テキストエリア</h2>
  <div class="container">
    <div>
      <textarea name="" id="" cols="30" rows="5">{{ text }}</textarea>
      <p>{{ text }}</p>
    </div>
    <div>
      <textarea name="" id="" cols="30" rows="5" v-model="text2"></textarea>
      <p>{{ text2 }}</p>
    </div>
  </div>

  <h2>チェックボックス</h2>
  <div class="container">
    <div>
      <h3>１つ</h3>
      <input type="checkbox" v-model="checked">
      <p>{{checked}}</p>
    </div>
    <div>
      <h3>複数</h3>
      <input type="checkbox" id="red" v-model="colors" value="Red">
      <label for="red">Red</label>
      <input type="checkbox" id="blue" v-model="colors" value="Blue">
      <label for="blue">Blue</label>
      <input type="checkbox" id="green" v-model="colors" value="Green">
      <label for="green">Green</label>
      <p>{{colors}}</p>
    </div>
  </div>

  <h2>ラジオボタン</h2>
  <input type="radio" id="red2" v-model="color" value="Red">
  <label for="red2">Red</label>
  <input type="radio" id="blue2" v-model="color" value="Blue">
  <label for="blue2">Blue</label>
  <input type="radio" id="green2" v-model="color" value="Green">
  <label for="green2">Green</label>
  <p>{{color}}</p>


  <h2>セレクトボックス</h2>
  <div class="container">
    <div>
      <h3>１つ</h3>
      <select name="" id="" v-model="selected">
        <option value="">選択してください</option>
        <option value="1">１番目</option>
        <option value="2">２番目</option>
        <option value="3">３番目</option>
      </select>
      <p>{{selected}}</p>
    </div>
    <div>
      <h3>複数</h3>
      <select name="" id="" v-model="selected2" multiple>
        <option value="">選択してください</option>
        <option value="1">１番目</option>
        <option value="2">２番目</option>
        <option value="3">３番目</option>
      </select>
      <p>{{selected2}}</p>
    </div>
  </div>
  
  <h2>lazy修飾子</h2>
  <input type="text"...

CSS

#app {
  max-width: 500px;
}

h2 {
  font-size: 1.2rem;
}

h2::before {
  content: "■";
}

.container {
  display: flex;
}

.container>div {
  margin-right: 2rem;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    message: 'hogehoge',
    text: 'text',
    text2: 'text2',
    checked: true,
    colors: ['Blue'],
    color: 'Green',
    selected: 3,
    selected2: [2],
    lazy: '',
    trim: '',
    number: 0,
    number2: 0,
  },
})