本文将详细介绍vue表单控件数据绑定方法,需要的朋友可以参考下
可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model本质上不过是语法糖，它负责监听用户的输入事件以更新数据
[注意]v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它会选择Vue实例数据来作为具体的值。应该通过JS组件的data选项中声明初始值
Message is: {{ message }}
实际上v-model是:value和@input事件的语法糖
Message is: {{ message }}
Multiline message is:{{ message }}
[注意]在文本区域插值( ) 并不会生效，应用 v-model 来代替
Checked names: {{ checkedNames }}type:radio
Picked: {{ picked }}select
单选列表
Selected: {{ selected }}[注意]如果v-model表达初始的值不匹配任何的选项，
多选列表
Selected: {{ selected }}动态选项
用v-for渲染
Selected: {{ selected }}绑定value
对于单选按钮，勾选框及选择列表选项， v-model绑定的value通常是静态字符串（对于勾选框是逻辑值）
但若要绑定value到Vue实例的一个动态属性上，就可以用v-bind实现，并且这个属性的值可以不是字符串
复选框
{{ toggle }}单选按钮
{{ pick }}选择列表
Selected: {{ selected.number }}修饰符
.lazy
在默认情况下， v-model在input事件中同步输入框的值与数据，但可以添加一个修饰符 lazy ，从而转变为在change事件中同步
下列例子中，光标移出输入框时，才同步数据
Message is: {{ message }}
.number
如果想自动将用户的输入值转为Number类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符number给v-model来处理输入值
这通常很有用，因为在 type="number" 时 html 中输入的值也总是会返回字符串类型
{{type1}}普通输入: {{ age1 }}
{{type2}}number修饰符输入: {{ age2 }}
.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入
msg is: {{ msg }}
更多关于Vue表单控件数据绑定的方法请点击下面的相关链接
以上就是Vue表单控件数据绑定方法详解的详细内容，更多请关注www.12346.net其它相关文章！
声明：有的资源来自网络转载，版权归原作者所有，如有侵犯到您的权益 请一个月内联系我们，我们将配合处理！
原文地址：Vue表单控件数据绑定方法详解发布于2023-01-25 12:00:01
服务电话
