v-model和v-bind的区别

v-model和v-bind的区别

这两个好像很相似,v-model可以绑定VUE实例中的属性,也可以绑定表单元素的value。

有时候有点困惑,什么时候该用哪个

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕慕子 2021-10-26 16:20:55

同学你好,对于你的问题解答如下:

1、v-model多在表单中使用,在表单元素上创建双向绑定

示例:一秒钟改变message的值时,输入框中的内容也会跟着改变,输入框的内容改变时,message也会跟着改变。

https://img1.sycdn.imooc.com//climg/6177b7ee099e20f806370572.jpg

https://img1.sycdn.imooc.com//climg/6177b8790a9be99005140150.jpg


另外,v-model属于语法糖,上面的写法与使用v-bind给输入框绑定value属性值,并添加input事件实现的效果是一样的,如下:

https://img1.sycdn.imooc.com//climg/6177b92709a77a8408980686.jpg

2、v-bind用来绑定数据和属性以及表达式,缩写为':'

如果不与input事件,无法实现v-model的双向绑定动能。

示例:一秒钟后改变message值,输入框中绑定的属性value属性值会跟随改变,但是改变输入框中的内容时,页面中显示的message无法跟随改变。

https://img1.sycdn.imooc.com//climg/6177b9bc0992fe0507570564.jpg

https://img1.sycdn.imooc.com//climg/6177ba290aba46ff05140150.jpg



祝学习愉快~

  • 提问者 JarvanIV #1

    这里的$event.target.value可以直接写$event吗?我看到vue官方文档是这样写的

    https://img1.sycdn.imooc.com//climg/61790b1009c1266711840720.jpg

    我有点疑问就是为何不用一个变量来接收,而是用$event来接收

    2021-10-27 16:17:56
  • 好帮手慕慕子 回复 提问者 JarvanIV #2

    同学你好,对于你的问题解答如下:

    1、老师第一次回答给出的示例代码中,$event.target.value不可以直接写$event。可以结合下图注释理解:

    https://img1.sycdn.imooc.com//climg/61790d0809d2115806050467.jpg

    2、截图官网中示例代码是直接书写的js表达式,子组件通过$emit触发事件并传递参数时,在父组件监中监听这个事件时,可以直接通过$event接收传递过来的值。可以理解为是一个特殊用法,特殊记忆下。

    如果需要使用自定义的变量名接收,那么可以参考如下写法:

    https://img1.sycdn.imooc.com//climg/617910bd09345d1211160893.jpg

    可以正确输出传递过来的值,如下:

    https://img1.sycdn.imooc.com//climg/617911780aafaba814720719.jpg

    祝学习愉快~

    2021-10-27 16:45:17
  • 提问者 JarvanIV 回复 好帮手慕慕子 #3

    https://img1.sycdn.imooc.com//climg/61791409090de0bc09240644.jpg

    这里可以省略参数吗?假如子组件中传多个参数呢?这里也可以省略吗?

    2021-10-27 16:56:22
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师