vue中有关input一系列操作

• .lazy在“change”时而非“input”时更新 .trim去掉首尾空格 .number如果输入e，就为空
• 单选框：sex的值即为选中的input单选框的value值
• 多选框：checkedNames为数组，选中的多选框的value值即为数组的元素
• 下拉框：selected的值为下拉框选择的option的value值,若没有value值，则为option标签的innerText

<template>
  <div class="footer">
    <input v-model="msg">
    <!-- .lazy在“change”时而非“input”时更新  .trim去掉首尾空格  .number如果输入e，就为空 -->
    <input v-model.lazy="msg">
    <input v-model.number="age" type="number">
    <input v-model.trim="msg">

    <!-- 单选框：sex的值即为选中的input单选框的value值-->
    <div class="radio">
      <label for="nan">男</label>
      <input type="radio" id="nan" value="男" v-model="sex">
      <label for="nv">女</label>
      <input type="radio" id="nv" value="女" v-model="sex">
    </div>
    
    <!-- 多选框：checkedNames为数组，选中的多选框的value值即为数组的元素 -->
    <div class="checkbox">
      <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>
      <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
      <label for="mike">Mike</label>
      <br>
      <span>Checked names: {{ checkedNames }}</span>
    </div>
    
    <!-- 下拉框：selected的值为下拉框选择的option的value值,若没有value值，则为option标签的innerText -->
    <div class="selected">
      <select v-model="selected">
        <option disabled value>请选择</option>
        <option value="1">A</option>
        <option value="2">B</option>
        <option>C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "",
      age: "",
      sex: "男",
      checkedNames: [],
      selected: ""
    };
  }
};
</script>