Vue指令-v-model

Vue指令-v-model

2026年5月15日·#javawebai/前端基础前端/Vue·421 字 2 分钟
浏览量加载中...
AI 摘要- DeepSeek

使用v-model在表单元素上实现数据和视图的双向绑定

Vue指令-v-model#

定义#

v-model指令用于在表单元素上实现双向数据绑定。它可以方便地获取或设置表单项数据,实现Vue数据与表单输入之间的自动同步。

语法/用法#

基本用法#

<!-- 文本输入框 -->
<input type="text" v-model="username">
<!-- 下拉选择框 -->
<select v-model="selected">
<option value="A">选项A</option>
<option value="B">选项B</option>
</select>
<!-- 多选框 -->
<input type="checkbox" v-model="checked">
<!-- 单选框 -->
<input type="radio" v-model="picked" value="a">

表单数据绑定#

<form class="search-form">
<input type="text" v-model="searchEmp.name" placeholder="姓名" />
<select v-model="searchEmp.gender">
<option value="">性别</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
</form>

常见场景#

  1. 表单输入:文本输入、密码输入、文本域
  2. 选择控件:下拉选择、单选框、多选框
  3. 搜索功能:搜索框与搜索条件的双向绑定
  4. 数据收集:用户注册、信息填写等表单场景
  5. 实时过滤:输入框内容实时过滤列表数据

注意事项#

  1. 数据源要求:

    • v-model绑定的变量必须在data()中定义
    • 变量可以是基本类型或对象属性
  2. 双向绑定原理:

    • Vue数据变化 → 视图更新
    • 视图输入变化 → Vue数据更新
    • 本质是v-bind和v-on的语法糖
  3. 修饰符:

    • .lazy:在change事件后同步数据
    • .number:将输入转为数字类型
    • .trim:自动过滤首尾空白字符
  4. 自定义组件:

    • 在自定义组件上使用v-model需要特殊处理
    • 需要组件内部实现modelValue和update:modelValue
  5. 与原生表单区别:

    • 不需要手动获取表单值
    • 数据变化自动同步到视图
    • 支持多种表单元素类型

相关链接#

评论区

[ 标签 ]
# AI37# AI 编程2# AI工具1# AI绘图1# AI辅助开发2# Ajax7# Apifox1# AstrBot3# Astro2# CC Switch1# CDN2# Claude Code1# claudecode2# ClaudeCode1# Cloudflare2# CloudFlare2# CloudFlare-ImgBed3# coc4# CSS10# DeepSeek6# deepseek2# DELETE1# Docker5# EdgeOne3# Gist1# git1# GitHub1# hexo-circle-of-friends1# HTML9# HTTP10# ImageManager1# Java23# java13# JavaScript11# JavaWeb113# JDBC7# JSON2# JUnit1# LangChain25# Linux4# Logback1# Maven17# Muse Spark1# Mybatis1# MyBatis18# MySQL45# MySql1# NapCat1# Node.js1# obsidian2# Obsidian5# OpenCode4# ORM1# PathVariable1# PicGo1# PyCharm1# Python70# RequestBody1# RequestMapping1# RESTful风格1# skills1# Slf4j1# SpringBoot37# SpringMVC5# SQL2# Streamlit5# Svelte2# TailwindCSS1# Telegram3# Tlias2# Vercel1# vscode2# Vue20# Waline3# Web3# WebDAV1# Web基础6# Web开发6# WinSCP1# YAML1# 三层架构1# 中二宣言1# 书籍1# 使用文档10# 写作1# 函数2# 刷步数1# 前端52# 动态1# 动漫1# 包1# 单词2# 博客8# 博客工作流1# 博客开发2# 参数接收1# 友链1# 反思2# 后端48# 图床6# 地图1# 备份2# 大模型1# 奇思妙想1# 存储1# 学习方法6# 学校1# 宝塔面板3# 宝宝10# 实战4# 对象1# 导航栏1# 工具2# 布局2# 开发1# 开发工具1# 开发规范1# 开心1# 异常处理1# 影视2# 微信1# 性能优化2# 总结1# 想法15# 感受1# 感悟11# 指南1# 提示词工程2# 插件5# 故障排除1# 效率工具2# 教程10# 数据分析9# 数据库27# 数据结构1# 文件操作2# 斩神1# 日常95# 日志框架1# 朋友圈1# 朱元璋1# 模块1# 模板1# 正则表达式2# 测试3# 游戏2# 爬虫7# 生活迁移1# 电影2# 电脑1# 碎碎念1# 视觉识别1# 类1# 类型注解1# 网络基础2# 网络教室1# 羊毛2# 脚本2# 脚本工具1# 自动化2# 蓝奏云1# 表单1# 订阅推荐2# 记录2# 评论系统1# 词根1# 词缀1# 说说1# 足迹1# 跑步2# 路径参数1# 转载2# 运动1# 部署11# 部落冲突1# 配置1# 随机图1# 面向对象5# 音乐3# 音标1# 项目实战11# 饮食1# 驼峰命名1# 高德地图1
[ 公告 ]

如果你喜欢,那么欢迎来到我的世界!

了解更多
[ 音乐 ]
封面

音乐

暂未播放

0:000:00
暂无歌词
找不到相关结果。
[ contents ]
[ 全部文章 ]