今天在写demo的时候发现一件奇怪的事:

当我在给 input 元素使用 v-model 的缩写形式 :model 时,想要绑定的数据并没有渲染到浏览器中

 然鹅,改为 v-model 之后就能成功渲染了

 于是经过我一番研究发现 :model 其实相当于 v-bind:model 的缩写,对于我想要绑定的 input 的值应该使用 v-bind:value ,所以如果在 input 元素上想要使用缩写形式应该是 :value ,经过我的试验发现这种缩写形式确实是可行的,数据可以成功渲染到浏览器

v-model:

v-model 是 v-model:value 的缩写,通常用于表单上的双向数据绑定(表单接受值 value,故v-model默认收集的就是 value ,所以缩写直接省略 value),可以实现子组件到父组件的双向数据动态绑定。数据不仅能从data流向页面,还可以从页面流向data。

:model:

:model 是 v-bind:model 的缩写,可以实现将父组件的值传递给子组件,但是子组件不能传给父组件,无法双向绑定。

v-bind:

v-bind:value 可以简写为 :value ,数据只能从data流向页面。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐