Vue——使用v-bind与v-on实现v-model双向绑定
发布日期:2021-05-12 21:18:09 浏览次数:21 分类:精选文章

本文共 589 字,大约阅读时间需要 1 分钟。

Vue——使用v-bind与v-on实现v-model

v-model其实是一个语法糖,他的背后本质包含两个操作:

1.v-bind绑定一个value属性
2.v-on指令给当前元素绑定input事件


实现步骤如下:

①通过v-bind实现,若修改app.message,则使得网页显示的input中的value也发生改变。

    

{ { message}}

②通过v-on实现,若通过键入input,则修改app.message的值。

    

{ { message}}

③更简单的书写方式实现v-on——根本不用绑定方法

    

{ { message}}

全部代码:

    

{ { message}}

在这里插入图片描述

总结:
以下两种方式是等同的。

上一篇:Vue中v-model结合radio、checkbox单/多选框、select单/多选框的几种特殊写法
下一篇:JS数组中的map()、filter()以及reduce()的基本使用

发表评论

最新留言

路过,博主的博客真漂亮。。
[***.116.15.85]2025年04月14日 07时24分07秒