vue表单双向绑定,vue单向绑定
本文主要介绍Vue表单输入绑定v-model，指定它可以实现表单值和属性的双向绑定。也就是说，更改表单元素中的值将自动更新属性中的值，更新属性中的值将自动更新表单中的值。
在这里，我们一起进入文章。哦，妹子，文章的细节。
目录
1.v型2。绑定属性和事件3。表单元素绑定
3.1输入绑定3.2 textarea绑定3.3复选框绑定3.4单选绑定3.5选择绑定4。值绑定
4.1代码解释5。修饰语
5.1 .懒5.2 .数字5.3。整齐
1.v-model
V-model规定可以实现表单值和属性之间的双向绑定。也就是说，更改表单元素中的值将自动更新属性中的值，更新属性中的值将自动更新表单中的值。
2.绑定的属性和事件
v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：
1.1.text和textarea元素使用value属性和输入事件。
2 .复选框和单选按钮使用checked属性和change事件。
3 .选择字段以值为属性，以事件为变化。
3.表单元素绑定
3.1 input绑定
input-model= message placeholder=请输入.
p的输入内容为：{{ message }}/p
3.2 textarea绑定
span的输入内容为：/span
p style=空白：行前；{{ message }}/p
英国铁路公司
textarea v-model= message placeholder=请输入多行./textarea
3.3 checkbox绑定
多个复选框，绑定到同一个数组
div id=应用程序
Type=复选框 id=篮球 value=篮球 v-model=爱好
篮球的标签
Type= checkbox id=足球 value=足球 v-model=爱好
足球的标签
Type= checkbox id=排球 value=排球 v-model=爱好
标签为=排球排球/标签
p{{hobby}}/p
/div
脚本
const app=new Vue({
埃尔： #app ，
数据：{
爱好：[]
}
})
/脚本
3.4 radio绑定
div id=应用程序
输入类型= radio id= One value= One v-model= picked
的标签=oneOne/label
英国铁路公司
输入类型=单选 id=两个值=两个 v-model=已选取
标签为=twoTwo/label
英国铁路公司
spanPicked: {{ picked }}/span
/div
新Vue({
埃尔： #app ，
数据：{
已选取：“”
}
})
3.5 select绑定
单选时：
div id=#app
选择垂直模型=选定
选项禁用值= 请选择/选项。
选项a/选项
选项b/选项
选项c/选项
/选择
span selected:{ selected } }/span
/div
新Vue({
艾尔：“…”,
数据：{
选定的：“”
}
})
多选时，只需加上multiple属性即可
div id=#app
select v-model= selected multiple style= width:50px；
选项a/选项
选项b/选项
选项c/选项
/选择
英国铁路公司
span selected:{ selected } }/span
/div
4.值绑定
对于单选按钮、复选框和选择框的选项，v-model绑定的值通常是一个静态字符串(或者对于复选框是一个布尔值)。
但是有时候我们可能想把值绑定到Vue实例的一个动态属性上，可以用v-bind来实现，这个属性的值可能不是一个字符串。
div id=应用程序
把v标为“爱好中的爱好”
input type= checkbox :id= hobby :value= hobby v-model= test hobby { hobby } }
/标签
p{{testHobby}}/p
/div
脚本
const app=new Vue({
埃尔： #app ，
数据：{
爱好：[篮球，足球，羽毛球，乒乓球，网球]，
测试爱好：[]
}
})
/脚本
4.1 代码详解
1.我们在数据中创建了爱好数组，这里模拟后端返回的数据，是动态的。
2.定义了数组testHobby，它将复选框中的数据与其绑定。一旦复选框中的数据被选中，它将被添加到testHobby中。
3.for循环用于遍历爱好数据中的数据。
4.id属性和value属性绑定在4.input标签中，值是遍历的数据，打开后可以在网页源代码中看到。
5.v-model将输入标签与testHobby绑定
最后我们查看下绑定的效果，与绑定后的网页源码
我们可以看到绑定后id和value的值都是遍历后的hobby
5.修饰符
5.1 .lazy
默认情况下，在每个输入事件被触发后，v-model将输入框的值与数据同步。您可以添加lazy修饰符，以便该值仅在您按Enter键或失去焦点时才会改变：
！-在失去焦点或输入enter时更改值，而不是在“输入”时更新-
输入v-model.lazy=msg
5.2 .number
如果您想自动将用户的输入值转换成数字类型，您可以将number修饰符添加到v-model:
输入v-model . number= age type= number
这通常很有用，因为即使当type=number 时，HTML输入元素的值也总是返回一个字符串。如果parseFloat()无法解析该值，将返回原始值。
5.3 .trim
如果要自动过滤用户输入的前导和尾随空白字符，可以将trim修改器添加到v-model:
输入v-model.trim=msg
这就是这篇关于Vue表单输入绑定v-model的文章。更多关于Vue v-model的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。