今天给各位分享联想model name笔记本的知识，其中也会对关于 v-model 你需要知道的这一切进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文已经过原作者ichaelThiessen授权翻译。
Vuev-model是一个指令，它提供了input和form之间或两个组件之间的双向数据绑定。
这是Vue开发中的一个简单概念，但v-model的真正威力需要花些时间才能理解。
本文主要讲解v-model的不同用例，并学习如何在自己的项目中使用它。
v-model是什么？
刚才讲过，``v-model`是一个我们可以在模板代码中使用的指令。指令是一个模板令牌，它告诉Vue我们想要如何处理DOM。
在v-model的情况下，它告诉Vue我们想要在template中的值和data属性中的值之间创建一个双向数据绑定。
使用v-model的一个常见用例是在设计表单相关的一些元素时。我们可以使用它使input元素能够修改Vue实例中的数据。
<template>\n<div>\n<input\ntype=&39;\nv-model=&39;\n/>\n<p>Value:{{value}}</p>\n</div>\n</template>\n\n<script>\nexportdefault{\ndata(){\nreturn{\nvalue:&39;\n}\n}\n}\n</script>\n
当我们在input中输入内容时，我们会看到我们的数据属性正在变化
v-model和v-bind之间的区别？
v-bind指令通常会与v-model切换。两者的区别在于v-model提供了双向数据绑定。
在我们的例子中，这意味着如果我们的数据改变了，我们的input也会改变，如果我们的input改变了，我们的数据也会改变。
而v-bind只以一种方式绑定数据。
当我们想在自己的应用中创建一个清晰的单向数据流时，这是非常有用的。但是，在v-model和v-bind之间选择时必须小心。
v-model的修饰符
Vue提供了两个修饰符，允许我们更改v-model的功能。每一个都可以像这样加起来，甚至可以连接在一起。
<input\ntype=&39;\nv-model.trim.lazy=&39;\n/>\n
.lazy
默认情况下，v-model在每个input事件上与Vue实例的状态（数据属性）同步。这包括获得/失去焦点等。
.lazy修改器修改了我们的v-model，所以它只在更改事件之后同步。这减少了v-model试图与Vue实例同步的次数，在某些情况下，还可以提高性能。
.number
通常，即使输入的是数字类型，input也会自动将输入的值变为字符串。确保将我们的值作为数字处理的一种方法是使用.number修饰符。
根据Vue文档，如果input发生变化，并且parseFloat()无法解析新值，那么将返回输入的最后一个有效值。
<input\ntype=&39;\nv-model.number=&39;\n/>\n
.trim
与大多数编程语言中的trim方法类似，.trim修饰符在返回值之前删除开头或结尾的空白。
在自定义组件中使用v-model
在Vue中，数据绑定有两个主要步骤：
从父节点传递数据从子实例发出事件以更新父实例在自定义组件上使用v-model可以让我们传递一个prop，用一个指令来处理一个事件。
<custom-text-inputv-model=&34;/>\n\n<!--ISTHESAMEAS-->\n\n<custom-text-input\n:modelValue=&34;\n@update:modelValue=&34;\n/>\n
这到底是什么意思?
使用v-model传递的值的默认名称是modelValue。但是，我们也可以像这样传递一个自定义名称。
<custom-text-inputv-model:name=&34;/>\n
注意：当我们使用自定义模型名称时，发出的方法的名称将为update:name。
在自定义组件中使用v-model
在自定义组件中使用v-mode，需要做两件事：
在props中接收v-model的值。当对应的值变化时，发出一个更新事件ok，首先来声明一下：
exportdefault{\nprops:{\nmodelValue:String,\n}\n}\n
接下来，将modelValue绑定到需要的元素，当值变化时，我们就通过update:modelValue发出新值。
这样就可以实现双向绑定了。
v-model的使用技巧
上面介绍了如果在自定义组件中使用v-model，现在来看看一些v-model指令更高级的用法。
对一个组件多次使用v-model
v-model并不局限于每个组件只能使用一个。要多次使用v-model，我们只需要确保唯一命名，并在子组件中正确访问它。
为下面的组件添加第二个v-model，这里先命名为lastName:
<template>\n<div>\n<custom-text-input\nv-model=&39;\nv-model:lastName=&39;\n/>\n<p>Value:{{value}}</p>\n<p>LastName:{{lastName}}</p>\n</div>\n</template>\n\n<script>\nimportCustomTextInputfrom&39;\n\nexportdefault{\ncomponents:{\nCustomTextInput,\n},\ndata(){\nreturn{\nvalue:&39;,\nlastName:&39;\n}\n}\n}\n</script>\n
然后，我们内部的子组件:
<template>\n<div>\n<label>FirstName</label>\n<input\ntype=&39;\n:value=&39;\nplaceholder=&39;\n@input=&34;update:modelValue&39;\n/>\n<label>LastName</label>\n<input\ntype=&39;\n:value=&39;\nplaceholder=&39;\n@input=&34;update:lastName&39;\n/>\n</div>\n</template>\n\n<script>\nexportdefault{\nprops:{\nlastName:String,\nmodelValue:String,\n}\n}\n</script>\n
运行后，可以看到两个v-model都可以正常工作：
自定义v-model的修饰符
Vue中内置了一些修饰符，但这些远远不够，所以有时我们需要自定义自己的修饰符。
假设我们要创建一个修饰符，以删除输入的文本中的所有空格。我们称之为no-whitespace：
<custom-text-input\nv-model.no-whitespace=&39;\nv-model:lastName=&39;\n/>\n
在组件内，我们可以使用props来捕获修改器。自定义修饰符的名称是nameModifiers
props:{\nlastName:String,\nmodelValue:String,\nmodelModifiers:{\ndefault:()=>({})\n}\n},\n
我们要做的第一件事是改变@input处理器来使用一个自定义方法。我们可以称它为emitValue，它接受正在编辑的属性和事件对象的名称。
<label>FirstName</label>\n<input\ntype=&39;\n:value=&39;\nplaceholder=&39;\n@input=&34;modelValue&39;\n/>\n
在emitValue方法中，在调用$emit之前，我们要检查修饰符。如果no-whitespace修饰符为true，则可以在将其发送给父对象之前修改该值。
emitValue(propName,evt){\nletval=evt.target.value\nif(this.modelModifiers[&39;]){\nval=val.replace(/\\s/g,&39;)\n}\nthis.$emit(`update:${propName}`,val)\n}\n
运行，完美：
总结
希望本文能教给大家一些有关Vuev-model的新知识。
在它的基本用例(如表单和input数据)中，v-model是一个非常简单的概念。然而，当我们创建自定义组件并处理更复杂的数据时，我们可以释放v-model的真正威力。
~完，我是刷碗智，我要去刷碗了，我们下期见！
作者：MichaelThiessen译者：前端小智来源：news
原文：https://learnvue.co/2021/01/everything-you-need-to-know-about-vue-v-model/
联想model name笔记本和关于 v-model 你需要知道的这一切的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！
