我们之前使用过v-model来双向绑定input的值，这节课我们简单介绍一下其他表单类型使用v-model，内容可能长一点，大家简单过一遍就行了，用到时候再去官网查也不晚。

1.input文本框

  <input type="text" v-model="message" placeholder="请输入内容" />
  <div>input中的内容是：{{ message }}</div>

2.textarea多行文本

<textarea v-model="messageTextArea" placeholder="请输入内容"></textarea>
<div>textarea中的内容是：{{ messageTextArea }}</div>

3.checkbox复选框

1)单个复选框

<input type="checkbox" id="singleChecked" v-model="singleChecked" />
<label for="singleChecked">{{ singleChecked }}</label>

2）多个复选框

    <input type="checkbox" id="ironman" value="钢铁侠" v-model="checkedHeroes" />
    <label for="ironman">钢铁侠</label>
    <input type="checkbox" id="batman" value="蝙蝠侠" v-model="checkedHeroes" />
    <label for="batman">蝙蝠侠</label>
    <input type="checkbox" id="flash" value="闪电侠" v-model="checkedHeroes" />
    <label for="flash">闪电侠</label>
    <div>你已经选择的超级英雄有：{{ checkedHeroes }}</div>

这里checkedHeroes是一个数组，这些checkbox的v-model都绑定checkedHeroes这个数据就行了

4.radio单选框

    <input type="radio" id="Thor" value="雷神" v-model="radioChecked" />
    <label for="Thor">雷神</label>
    <input type="radio" id="hulk" value="绿巨人" v-model="radioChecked" />
    <label for="hulk">绿巨人</label>
    <div>你已经选择的超级英雄是： {{ radioChecked }}</div>

这里radioChecked是一个字符串，这些radio的v-model都绑定radioChecked 这个数据，选中哪个，radioChecked 的值就是哪个radio的value

5.select选择框

1）单选

    <select v-model="selectedHero">
      <option>钢铁侠</option>
      <option>蝙蝠侠</option>
      <option>闪电侠</option>
    </select>
    <div>你已经选择的超级英雄是： {{ selectedHero }}</div>

2）多选

  <div>
    <select v-model="selectedHeroes" multiple>
      <option>钢铁侠</option>
      <option>蝙蝠侠</option>
      <option>闪电侠</option>
    </select>
    <div>你已经选择的超级英雄有： {{ selectedHeroes }}</div>
  </div>

这时候selectedHeroes 是一个数组，按住ctrl点击选项才能多选

表单的输入绑定大家了解一下就行了，实际工作中用到的也不多，因为实际中要求样式和用户体验，八成是要使用一个ui组件库，不会直接用原生的input。

完整的代码

<template>
  <div>
    <input type="text" v-model="message" placeholder="请输入内容" />
    <div>input中的内容是：{{ message }}</div>
  </div>
  <div>
    <textarea v-model="messageTextArea" placeholder="请输入内容"></textarea>
    <div>textarea中的内容是：{{ messageTextArea }}</div>
  </div>
  <div>
    <input type="checkbox" id="singleChecked" v-model="singleChecked" />
    <label for="singleChecked">{{ singleChecked }}</label>
  </div>
  <div>
    <input
      type="checkbox"
      id="ironman"
      value="钢铁侠"
      v-model="checkedHeroes"
    />
    <label for="ironman">钢铁侠</label>
    <input type="checkbox" id="batman" value="蝙蝠侠" v-model="checkedHeroes" />
    <label for="batman">蝙蝠侠</label>
    <input type="checkbox" id="flash" value="闪电侠" v-model="checkedHeroes" />
    <label for="flash">闪电侠</label>
    <div>你已经选择的超级英雄有：{{ checkedHeroes }}</div>
  </div>
  <div>
    <input type="radio" id="Thor" value="雷神" v-model="radioChecked" />
    <label for="Thor">雷神</label>
    <input type="radio" id="hulk" value="绿巨人" v-model="radioChecked" />
    <label for="hulk">绿巨人</label>
    <div>你已经选择的超级英雄是： {{ radioChecked }}</div>
  </div>
  <div>
    <select v-model="selectedHero">
      <option>钢铁侠</option>
      <option>蝙蝠侠</option>
      <option>闪电侠</option>
    </select>
    <div>你已经选择的超级英雄是： {{ selectedHero }}</div>
  </div>
  <div>
    <select v-model="selectedHeroes" multiple>
      <option>钢铁侠</option>
      <option>蝙蝠侠</option>
      <option>闪电侠</option>
    </select>
    <div>你已经选择的超级英雄有： {{ selectedHeroes }}</div>
  </div>
</template>

<script>
// 表单输入绑定
export default {
  name: 'App',
  data() {
    return {
      message: '',
      messageTextArea: '',
      singleChecked: true,
      checkedHeroes: [],
      radioChecked: '',
      selectedHero: '',
      selectedHeroes: [],
    }
  },
}
</script>

<style></style>