Vue常用特性(表单操作)

祝各位新年快乐,开开心心每一天

表单操作

作用: 用户交互

应用场景:邮件传输

Vue常用特性(表单操作)_第1张图片

常用表单的数据类型

  • Input 单行文本
    使用 v-model 进行双向数据绑定

  • textarea 多行文本
    使用 v-model 尽享双向数据绑定

  • select 下拉多选
    为每个选项设置一个 value 并给 select 设置 v-model 的值 (可以单选也可以多选)
    如果想要多选 需要为 select 设置 multiple=“true” 或者 直接写 multiple

  • radio 单选框
    分别给每个选项设置一个value 并设置一样的 v-model
    v-model的值就是默认单选框选中的选项的value值

  • check 多选框
    分别给其设置不同的value值 和相同的 v-model值
    v-model的值就是默认多选框选中的选项的value值(数组)

表单域修饰符

  • number: 转换为数值
  • trim 去掉开始和结尾的空格
  • lazy:将input事件切换为change事件


课余知识

input 按钮 可以通过 @click.prevent 来阻止默认行为并实现想要的功能

最近心情

你常常不自信,怕比不上很多人,但我就觉得你是最好的,怎么都好。我想告诉你:我给你的爱是兜底,是连你自己都不喜欢你的时候,还有我来爱你。

你可能感兴趣的:(前端,html,vue,表单,双向绑定,表单操作)