使用@Input事件引出v-model双向绑定
示例
基本上就是我们输入的值想在任何地方获取到
还可以简化代码,直接在方法里面实现
使用v-model就不需要在使用@input在对属性进行赋值取值了
表单输入绑定
v-model
你可以用 v-model 指令在表单 input
、textarea
及 select
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model
本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的 value
、checked
、selected
attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
在下面的示例中,输入框通过v-model
绑定了message
,用户在输入框里输入内容时,这个内容会实时赋值给message
。当然在代码里为message
赋值也会实时同步到界面上input里。这就是双向绑定。
在前端处理表单时,我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦:
v-model指令帮我们简化了这一步骤: