v-bind、v-model、v-on

最新推荐文章于 2025-10-20 18:16:11 发布

原创最新推荐文章于 2025-10-20 18:16:11 发布 · 588 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

VUE 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了Vue.js中三个核心指令的使用方法：v-bind用于响应式地更新HTML特性；v-on用于监听DOM事件；v-model实现表单数据的双向绑定。通过具体示例展示了这些指令如何简化前端开发。

v-bind绑定数据，缩写使用冒号 :

v-bind 指令可以用于响应式地更新 HTML 特性：
<span v-bind:title="message">
<span :title="message">

v-on动作监听，缩写@

v-on 指令，它用于监听 DOM 事件
<form v-on:submit.prevent="onSubmit">...</form>
<form @submit.prevent="onSubmit">...</form>

v-model双向绑定缩写:model

主要是用于表单上数据的双向绑定
<input type="text" v-model="mes">  
此时mes值就与input的值进行双向绑定

记住：与数据相关用冒号与动作相关用@

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿波罗AP

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue中v-bind、v-model、v-on、循环v-for、判断v-if、v-else、v-show、v-text、v-html、v-pre、v-once非常详细包你学会

爱吃Java的羊的博客

06-26

970

v-bindVue中v-bind、v-on、v-model、循环v-for、判断v-if、v-else、v-show、v-text、v-html、v-pre、v-once非常详细包你学会v-bind。

浅谈Vue当中的绑定，包括属性绑定（v-bind，v-model）和事件绑定（v-on），和它们之间的区别

m0_61768030的博客

01-06

1476

给元素绑定事件监听器。当用于普通元素，只监听原生 DOM 事件。当用于自定义元素组件，则监听子组件触发的自定义事件。（注意：自定义事件是组件通信的内容，我们另外再系统讲！当监听原生 DOM 事件时，方法接收原生事件作为唯一参数。如果使用内联声明，声明可以访问一个特殊的$event。v-on还支持绑定不带参数的事件/监听器对的对象。请注意，当使用对象语法时，不支持任何修饰符。动态的绑定一个或多个 attribute，也可以是组件的 prop。（源于vue文档）（注意：那我们这里主要讲。

参与评论您还未登录，请先登录后发表或查看评论

填坑记录之Vue中v-model与:model区别

01-20

初做vue项目中遇到这个问题，记录一下。源代码：打算做的表单验证功能。结果发现在验证的过程中username规则的第一条正确了却一直通过不了。通过控制台得知长度一直为1。原来是拿不到数据。 v-model通常用于input的双向数据绑定,它并不会向子组件传递数据。 :model是v-bind:model的缩写，是绑定自定义属性.它只是将父组件的数据传递给子组件，并没有实现父组件和子组件数据之间的双向绑定。所以在form表单标签中，并没有向子组件传递数据，所以在input标签中获取不到数据。正确的做法应该将form标签中v-model改为 :model，这样在子组件中才可以获

Vue 双向绑定终极指南：v-model vs v-bind

奋斗的小前端

10-20

1381

Vue 中 v-bind 与 v-model 核心区别： v-bind 实现单向数据绑定（数据→视图），用于动态绑定属性、样式和组件 props，视图修改不会影响数据。v-model 是双向绑定的语法糖（数据↔视图），主要处理表单输入，底层通过 v-bind + 事件监听实现同步。v-bind 使用冒号缩写（:属性），v-model 则直接绑定变量。自定义组件使用 v-model 需通过 props 接收数据并用 $emit 更新。v-model 支持修饰符如 .trim、.number 优化输入处理。

基于VUE3和ElementPlus从头搭建通后台管理系统(前端篇)

08-08

从零开始搭建完整的通用管理后台前端，使用vue3+elementplus搭建系统UI界面，使用mock模拟数据，使用echarts实现系统可视化模块，可以此项目为基础进行扩展开发，快速搭建管理系统，具体内容如下：常见功能实现：实现用户登录（用户名密码登录、手机验证码登录、二维码扫码）、找回密码（邮箱找回、短信验证码找回）、系统主页、用户管理、系统配置、数据字典、日志管理、菜单管理、角色管理、消息管理、验证码管理、可视化界面等管理系统的常见功能。公共常用组件：实现公共组件的抽离以便能进行扩展及复用，包括通用表格、通用编辑器、通用详情页、关联对象多选框、关联对象单选框、关联对象树形选择框、多级联动选择框、自动搜索保存组件、列表选择框组件等常用的组件。源码获取方式：点击 https://gitcode.net/invite_link?invite_code=asqckJc7HUKjU_HuLjX4 申请加入项目，申请后等待审核，审核通过后即可使用git检出项目，请购买课程后再申请，若为学习会员请留言说明，留言时请备注gitcode中的昵称信息，谢谢。项目效果预览：

v-bind、v-on、v-model指令

DOM曼珠沙华的博客

06-15

1206

v-bind v-bind指令就是用于绑定数据和元素属性的 var app = new Vue({ el:'.app', data:{ url:"https://www.baidu.com", } }); <div class="app"> <a v-bind:href="url">click me</a> </div> 意： v-bind后面是：属性名=，我的理解是表示绑定这个属性，绑定之后，对

vue中的v-bind、v-on和v-model

Anlantic的博客

10-20

939

vue.js的v-bind、v-on、v-model

vue- 基础使用，v-for、v-bind、v-if/v-else、v-show、v-model、.v-on

03-08

在Vue中，有几个核心指令用于构建动态用户界面，这些指令包括`v-for`、`v-bind`、`v-if/v-else`、`v-show`、`v-model`和`.v-on`。下面将详细介绍这些指令的使用方法和场景。 1. `v-for`: 这个指令用于在DOM元素上...

Vue.js 指令详解：v-bind, v-html, v-once, v-on, v-if, v-else-if, v-else 和 v-model

一起coding，一起嗨。

11-26

1322

Vue.js 指令详解：v-bind, v-html, v-once, v-on, v-if, v-else-if, v-else 和 v-model

Vue 3 迁移策略笔记—— 第28节：v-bind 合并行为

Jay的博客

01-27

1653

前言本笔记主要基于官方文档《迁移策略——v-bind 合并行为》编写。如有理解出入，请以官方文档为主。知识储备：《Vue api —— v-bind 》概述 Vue 3.x 中，v-bind=“object” 的绑定顺序会影响渲染结果。 Vue 2.x 的 v-bind 合并行为在 Vue 2.x，如果一个元素同时定义了 v-bind="object" 和一个相同的单独的 property （属性），那么这个单独的 property 总是会覆盖 object 中的绑定。如下： <tem

v-model、v-bind和v-on三大指令的区别

静Yu的博客

08-26

4373

v-model、v-bind和v-on三大指令的区别.

v-bind和v-model详解

qq_20831785的博客

07-12

516

说明 v-bind用来绑定数据和属性以及表达式，简写’:’ // 绑定文本 <p v-bind="message"></p> // 绑定属性 <p :class="myClass"></p> v-model指令在表单控件元素上创建双向数据绑定双向绑定指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据. 最基础的就是实现一个联动的效果 <input typ

Vue3 v-bind & v-on & v-model

xiangxiongfly

02-22

1479

v-bind 属性绑定 v-on 事件绑定 v-model 双向绑定

Vue绑定数据v-bind缩写:字段名双向绑定v-model缩写:model 监听动作v-on缩写@ 记住：与数据相关用冒号与动作相关用@