1. 程式人生 > 其它 >表單輸入繫結的學習

表單輸入繫結的學習

  <div class="hello">
    <div>
      <div>
        <p>.number修飾符:</p>
        <input type="text" v-model.number="msg" placeholder="請輸入">
        <label>{{msg}}</label>
        <p>.lazy修飾符:</p>
        <input type="text" v-model.lazy="msg" placeholder="請輸入">
        <label>{{msg}}</label>
        <p>.trim修飾符:</p>
        <input type="text" v-model.trim="msg" placeholder="請輸入">
        <label style="background-color: red;" >{{msg}}</label>
      </div>
      <div>
        <input type="text" v-model="name" value="名字" placeholder="請輸入名字">   
        <label>{{name}}</label>
      </div>
      <div>
        <input type="radio" v-model="pickA"  value="A"><label>A</label>
        <input type="radio" v-model="pickA"  value="B"><label>B</label>
        <label>選中了:{{pickA}}</label>
      </div>
      <div>
        <input type="checkbox" v-model="check" false-value='no' true-value='yes'>
        <!-- 選中的時候check是yes,否則是no -->
        <input type="checkbox" v-model="check">
        <!-- 選中的時候check是true,否則是false -->
        <label>{{check}}</label>
      </div>
      <div>
        <input type="checkbox" v-model="checks" value="A"><label>A</label>
        <input type="checkbox" v-model="checks" value="B"><label>B</label>
        <label>選中了:{{checks}}</label>
      </div>
    </div>
    <div>
      <textarea v-model="age" placeholder="請輸入年紀"></textarea>
      <label>{{age}}</label>
    </div>
    <div>
      <select v-model="selectA">
        <option disabled value="">請選擇</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <label>選中了:{{selectA}}</label>
      <div>
        <select v-model="selectB" multiple>
          <!-- multiple:展開選擇器,展開才可以多選 -->
          <option disabled value="">請選擇</option>
          <option v-for="item in option" :key="item">{{item}}</option>
        </select>
        <label>選中了:{{selectB}}</label>
      </div>
    </div>
  </div>
export default {
  name: 'HelloWorld',
  data () {
    return {
      name: '',
      age: '',
      picked: '',
      pickA:'',
      selectA: '',
      selectB: '',
      option:['A','B','C'],
      check: '',
      checks: [],
      msg:''
    }
  }
}
div{
  margin-bottom: 10px;
}

下面是演示部分: