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

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

1.input文本框

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

2.textarea多行文本


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

3.checkbox复选框

1)单个复选框



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。

完整的代码







你可能感兴趣的:([vue3快速入门] 16.v-model表单输入绑定)