vue v—model,vue中:model的作用
本文主要介绍vue的v-model使用实例，帮助大家更好的理解和使用Vue。感兴趣的朋友可以了解一下。
Vue框架不再是MVVM的双向绑定(模式-视图-视图-模型)。早在Vue 1.0的时候，Vue诞生的时候确实是MVVM的双向绑定。从Vue 2.0开始，Vue不再是双向绑定，而是像React一样单向绑定MV(Model-View)。但是Vue中还是有双向绑定接口的，v-model就是一个。
1. 基本用法
模板
div id=应用程序
输入垂直模型=x
{{x}}
/div
/模板
脚本
导出默认值{
data(){
返回{
x:初始化
}
}
}
修改JS中x的值，输入输入框也会相应变化。同样，在页面的输入输入框中手动输入一个值，变量x的值也会发生变化。对象中变量的变化会影响视图中输入的变化，视图中输入的变化会影响对象中变量x值的变化。这就是双向绑定(模型-视图-视图-模型)。
2. v-model
上述基本上使用v-model的代码相当于下面的代码：
模板
div id=应用程序
input:value= x @ input= x=$ event . target . value
{{x}}
/div
/模板
脚本
导出默认值{
data(){
返回{
x:初始化
}
}
}
/脚本
v-model为我们做的就是为input的值设置一个动态绑定，然后在输入框的input事件被触发后，实时修改动态绑定值的值。所以，v-model的本质就是以上方式的语法糖。
$event是本机DOM事件中的事件对象。
3. v-model 的修饰符
所有修改器都起辅助作用。其实你可以自己判断函数中的条件实现。的。lazyv-model默认监控输入框的输入事件，原生DOM的输入事件记录实时输入变化值。但是，有时候我们不需要实时记录结果，只需要记录最终的输入结果即可。
input的原生DOM事件中还有一个change事件，当输入框失去焦点或者按下enter键时执行。使用切换到v-model中的监控模式。懒惰修饰语。
模板
div id=应用程序
输入v-model.lazy=x
{{x}}
/div
/template相当于：template。
div id=应用程序
输入：value= x @ change= x=$ event . target . value
{{x}}
/div
/模板
number.number修饰符自动使用parseFloat()函数，在输入内容改变后给变量赋值时，把它变成一个数字。使用此修饰符时，变量的初始值必须是一个数字。
模板
div id=应用程序
输入v-model.number=x
{{x}}
/div
/模板
脚本
导出默认值{
data(){
返回{
x: 0
}
}
}
/脚本。整齐
Trim修饰符用于在更改输入内容后自动忽略并删除变量赋值前后的空格。更准确地记录输入的字符串内容。
模板
div id=应用程序
输入v-model.trim=x
{{x}}
/div
/模板
脚本
导出默认值{
data(){
返回{
x:初始化
}
}
}
/脚本
4. 自定义输入框的 v-modelv-model
的基本用法仅适用于本机输入框元素。对于用户自己封装的输入框，可以按照以下方式使用v-model。在组件上使用时，v-model的本质如下：
自定义输入v-model= x /自定义输入
相当于：
自定义输入：value= x @ input= x=$ event /自定义输入
因此，它在自定义窗体组件中编写如下：
模板
div class=wrapper
input:value= value @ input= $ emit( input ，$event.target.value)
/div
/模板
脚本
导出默认值{
道具：{
值：{
类型：字符串
}
}
}
/脚本
样式范围。包装{
边框：2px纯蓝；
显示：内嵌-块；
}。包装输入{
颜色：红色；
}
/风格
模板
div id=应用程序
MyInput v-model=x/
{{x}}
/div
/模板
脚本
从“”导入MyInput。/components/MyInput
导出默认值{
data(){
返回{
x: 0
}
},
组件：{
我的输入
}
}
/脚本
补充：如果要在自定义组件的原生输入框中使用v-model，可以根据组件v-model的本质，使用计算属性as=use的求值方法。
以上就是Vue v-model的使用实例的详细说明。更多关于vue v-model的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。