HuKai's Blog HuKai's Blog
首页
  • Java核心技术

    • Java基础
    • Java并发编程
    • JVM
    • Java新特性
  • Spring生态

    • Spring5
    • SpringMVC
    • SpringBoot
  • 开源框架

    • MyBatis
  • 计算机网络
  • 操作系统
  • 数据结构与算法
  • 设计模式
  • SQL数据库

    • MySQL
    • Oracle
  • NoSQL数据库

    • Redis
    • MongoDB
  • 页面样式

    • HTML
    • CSS
  • JavaScript

    • JavaScript基础
    • ECMAScript6教程
    • TypeScript
  • 前端框架

    • Vue
    • Webpack
  • NIO
  • Netty
  • RabbitMQ
  • 技术文档

    • GitHub技巧
    • 博客搭建
    • 技术笔记
  • 优质文章

    • 小技巧
    • 解决方案
GitHub (opens new window)

HuKai

梦想成为全栈的保安
首页
  • Java核心技术

    • Java基础
    • Java并发编程
    • JVM
    • Java新特性
  • Spring生态

    • Spring5
    • SpringMVC
    • SpringBoot
  • 开源框架

    • MyBatis
  • 计算机网络
  • 操作系统
  • 数据结构与算法
  • 设计模式
  • SQL数据库

    • MySQL
    • Oracle
  • NoSQL数据库

    • Redis
    • MongoDB
  • 页面样式

    • HTML
    • CSS
  • JavaScript

    • JavaScript基础
    • ECMAScript6教程
    • TypeScript
  • 前端框架

    • Vue
    • Webpack
  • NIO
  • Netty
  • RabbitMQ
  • 技术文档

    • GitHub技巧
    • 博客搭建
    • 技术笔记
  • 优质文章

    • 小技巧
    • 解决方案
GitHub (opens new window)
  • HTML

  • CSS

  • JavaScript基础

  • ECMAScript

  • TypeScript

  • Vue

    • Vue基础

      • 初识Vue
      • 模板语法 - 插值语法 - 指令语法
      • 计算属性和监听属性
      • 样式绑定 - class - style
      • 列表渲染v-for
      • 事件处理v-on
      • 表单输入绑定
        • 基础使用
          • text
          • radio
          • checkbox
        • 修饰符
          • .lazy
          • .number
          • .trim
      • 生命周期钩子
      • 过滤器filter
      • 常用内置指令
      • 自定义指令
    • Vue组件化编程

    • Vue脚手架

    • Vue插件

  • Webpack

  • 前端
  • Vue
  • Vue基础
HuKai
2022-02-23
目录

表单输入绑定

官方文档:表单输入绑定 — Vue.js (vuejs.org) (opens new window)

# 基础使用

# text

<input type="text"/>, 则v-model收集的是value值,用户输入的就是value值。

# radio

<input type="radio"/>,则v-model收集的是value值,且要给标签配置value值。

# checkbox

<input type="checkbox"/>

  1. 没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)
  2. 配置input的value属性:
    1. v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)
    2. v-model的初始值是数组,那么收集的的就是value组成的数组!!!

# 修饰符

# .lazy

在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述 (opens new window)输入法组合文字时)。你可以添加 lazy 修饰符,从而转为在 change 事件_之后_进行同步:

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">
1
2

# .number

如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:

<input v-model.number="age" type="number">
1

这通常很有用,因为即使在 type="number" 时,HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析,则会返回原始的值。

# .trim

如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:

<input v-model.trim="msg">
1
编辑 (opens new window)
#Vue
上次更新: 2022/03/20, 11:17:00
事件处理v-on
生命周期钩子

← 事件处理v-on 生命周期钩子→

最近更新
01
MyBatisPlus
03-20
02
MyBatis源码剖析-延迟加载
03-20
03
MyBatis源码剖析-二级缓存
03-20
更多文章>
Theme by Vdoing | Copyright © 2021-2022 HuKai | 赣ICP备17016768号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式