vue .sync修饰符和v-model区别,vue中v-model作用
本文主要介绍v模型及其修改器的相关信息。v-model指令有三个可选的修饰符：懒，数字和。修剪。本文通过示例代码非常详细地介绍了它们，有需要的人可以参考一下。
目录
v-model的前言修饰符：lazytrimnumberv-model在不同输入类型和其他元素中的使用。1.除了在中，您还可以使用其他类型的输入元素。2.在textarea(多行文本)中使用V-Model。3.V-Model在选择(下拉列表)汇总中的使用
前言
用于绑定数据和元素值，实现双向绑定。
当元素的值改变时，数据也改变，反之，当数据改变时，元素的值也改变。
大多数情况下，所有用户的输入值都要经过v-model，v-model简单易用，安全强大。
div class=" app "
输入类型=text v-model=name
{{name}}
/div
var app=新Vue({
艾尔：。应用程序，
数据：{
名字：“爱丽丝”
}
});
v-model的修饰符：
lazy
Lazy就是懒惰更新，不会马上更新。
事实上，它触发了一个变化事件。
好处：只有用户打完才能绑定，表单验证的结果会显示出来，不管是对还是错。但是在用户输入的过程中，不要打扰他。另外性能也有一点提升(但很小，可以忽略不计)。
div class=" app "
input type= text v-model . lazy= name
{{name}}
/div
trim
修剪；切断，切断，这里的意思是：去掉前后两端的所有空格
div class=" app "
input type= text v-model . trim= name
{{name}}
/div
number
一般用于可以用数字表示的类型，如年龄、价格等。
div class=" app "
输入类型=text v-model.number=age
{ {年龄}}
/div
一般情况下，如果没有数字，用户输入的是数字，但也是字符串数字。如果在这里填入修饰符v-model.number，那么你会得到一个number类型，不需要转换。
除了输入框之外，V-model还可以用在其他输入类型为文本的地方。
v-model在不同input类型以及在其他元素上的使用
1.除了在以外，还能在input元素为其他类型上使用
1.1用于输入元件型收音机(收音机盒)
div class=" app "
标签
男人
输入类型=单选 v-模型=性别值=男性
/标签
标签
妇女
输入类型= radio v-model= sex value= famale
/标签
{{sex}}
/div
//main.js
var app=新Vue({
艾尔：。应用程序，
数据：{
性别：，
}
});
1.2用于输入元素类型复选框(checkbox)
div class=" app "
你喜欢男人还是女人
标签
男人
输入类型=复选框 v-模型=性别值=男性
/标签
标签
妇女
输入类型=复选框 v-模型=性别值=女性
/labelbr
{{sex}}
/div
var app=新Vue({
艾尔：。应用程序，
数据：{
性别：[男性]，
}
});
2. v-model在textarea中的使用(多行文本)
多行文本
其实多行文字和单行文字的使用没什么区别，只不过一个多行和一个单行的使用方法一样。
div class=" app "
textarea v-model= article /textarea
/div
var app=新Vue({
艾尔：。应用程序，
数据：{
文章：`有很多代码.。`,
}
});
3. v-model在select中的使用(下拉列表)
3.1收音机下拉列表
div class=" app "
div你是哪里人？/div
选择垂直模型=从
选项值=1 广州/选项
选项值=2 北京/选项
/选择
/div
var app=新Vue({
艾尔：。应用程序，
数据：{
发件人：“1”，
}
});
3.2多选下拉列表
实际上，该元素添加了一个multiple属性，这意味着多个和多个选择。
div class=" app "
div你想去哪里？/div
select v-model=from multiple
选项值=1 广州/选项
选项值=2 北京/选项
期权价值=4 上海/期权
选项值=5 成都/选项
/选择
/div
var app=新Vue({
艾尔：。应用程序，
数据：{
来自：[1 ， 2]，
}
});
总结
关于v-model及其修改器的这篇文章到此为止。有关v-model及其修改器的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。