簡述

通過官方例子練習，學習如下知識點：

• 文本框數(shù)據(jù)綁定
• 多行文本
• 單選框
• 復選框
• 下拉選擇框
• 事件修飾符
  • lazy
  • number
  • trim

練習代碼

<template>
  <div class="about">
    <h1>表單輸入綁定</h1>
    <h3>單行文本</h3>
    <input v-model="message" placeholder="edit me">
    <p>message is {{message}}</p>
    <h3>多行文本</h3>
    <span>Multiline message is : </span>
    <p style="white-space:pre-line">{{multiMessage}}</p>
    <br>
    <textarea v-model="multiMessage" placeholder="edit multiline message"></textarea>
    <h3>復選框</h3>
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox"> {{checked}}</label>
    <h3>多個復選框</h3>
    <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
    <label for="jack">jack</label> 
    <input type="checkbox" id="John" value="John" v-model="checkedNames">
    <label for="John">John</label>
    <div>checkedNames:{{checkedNames}}</div>
    <h3>單選框</h3>
    <input type="radio" id="one" value="one" v-model="picked">
    <label for="one">one</label>
    <input type="radio" id="two" value="two" v-model="picked">
    <label for="two">two</label>
    <div>picked:{{picked}}</div>
    <h3>選擇框</h3>
    <select v-model="selected">
      <option disabled value="">請選擇</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>

    <h3>多選擇框</h3>
    <select v-model="multiSelected" multiple>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <div>selected:{{multiSelected}}</div>

    <h3>v-for渲染選擇框</h3>
    <select v-model="forSelected">
      <option v-for="option in options" :key="option.value" :value="option.value">{{option.text}}</option>
    </select>
    <span>slected:forSelected</span>
    <hr>
    <h2>值綁定</h2>
    <h3>復選框值綁定</h3>
    <input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
    <span>{{toggle}}</span>
    <h3>值綁定</h3>
    <input type="radio" v-model="pick" :value="a">
    <span>選中后的值 {{pick}} </span>
    <h3>選擇框</h3>
    <select v-model="selected">
      <option v-bind:value="{number:123}">123</option>
    </select>
    <hr>
    <h2>修飾符</h2>
    <h3>lazy:只有切換后改變綁定變量的值</h3>
    <input v-model.lazy="msg">
    <h3>number:轉(zhuǎn)化為數(shù)值型</h3>
    <input v-model.number="age" type="number">
    <h3>trim：過濾空行</h3>
    <input v-model.trim="msg">
  </div>
</template>
<script>
export default {
  data() {
    return {
      message:'',
      multiMessage:'',
      checked:false,
      checkedNames:[],
      picked:'one',
      selected:'',
      multiSelected:[],
      forSelected:'',
      options:[
        {text:'one',value:'A'},
        {text:'two',value:'B'},
        {text:'three',value:'C'},
      ],
      toggle:'',
      pick:'',
      a:'radio',
      msg:'',
      age:0
    };
  },
  methods:{
   
  }
};
</script>