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

优质创作者: 编程框架技术领域

2022-08-27 21:10:34

1.v-model用来进行data数据与页面数据的双向绑定。主要用于表单控件，被称为双向绑定
2.v-bind是data数据对页面标签中属性的绑定。被称为单向绑定
3.v-on是methods对页面事件的绑定。

https://blog.csdn.net/qq_46285118/article/details/126549565?spm=1001.2014.3001.5501

...全文

432 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

CSDN-Ada助手 2023-01-13

打赏
举报

回复

您可以前往 CSDN问答-其他发布问题, 以便更快地解决您的疑问

在表单输入元素或组件上创建双向绑定。v-model指令用于在表单控件或者组件上创建双向绑定。绑定值类型：根据表单输入元素或组件输出的值而变化。

文章目录区别详细用法属性绑定(`v-bind:`或`:`)单值绑定多值绑定绑定style双向绑定(`v-model`)元素绑定修饰符区别 v-bind:属性绑定(简写:), v-on:事件绑定(简写@), v-model:双向绑定(简写v-model,看下方的代码你就知道简写在哪了)。 v-bind与v-model都是绑定vue中data中的属性的,他们最主要的区别是v-bind的绑定只是单向的,他会将data中的数据投影到绑定的地方,在被绑定的地方对数据修改时,data中的原始数据是不会改变的,而v-m

vue中v-model和v-bind区别 Vue中的数据绑定绑定数据有三种方式：插值，也就是{{name}}的形式，以文本的形式和实例data中对应的属性进行绑定 v-bind： v-model： v-bind eg：v-bind:class 可简写为 :class 当加上v-bind:之后，它的值classe不是字符串，而是vue实例对应的data.cl...

v-model是vue.js中内置的双向数据绑定指令，用于表单控件以外的标签是不起作用的 (即只对表单控件标签的数据双向绑定有效)。 :model相当于v-bind:model的缩写， v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，这种只是将父组件的数据传递到了子组件，并没有实现子组件和父组件数据的双向绑定。当然引用类型除外，子组件改变引用类型的数据的话...

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

158

社区成员

200

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章