[vue3快速入门] 16.v-model表单输入绑定

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

1.input文本框

  
  
input中的内容是：{{ message }}

2.textarea多行文本

textarea中的内容是：{{ messageTextArea }}

3.checkbox复选框

1)单个复选框

{{ singleChecked }}

2）多个复选框

    
    钢铁侠
    
    蝙蝠侠
    
    闪电侠
    
你已经选择的超级英雄有：{{ checkedHeroes }}

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

4.radio单选框

    
    雷神
    
    绿巨人
    
你已经选择的超级英雄是： {{ radioChecked }}

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

5.select选择框

1）单选

    
      钢铁侠
      蝙蝠侠
      闪电侠
    
    
你已经选择的超级英雄是： {{ selectedHero }}

2）多选

  

    
      钢铁侠
      蝙蝠侠
      闪电侠
    
    
你已经选择的超级英雄有： {{ selectedHeroes }}
  

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

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

完整的代码