Vue 的 v-model用法实例


Posted in Vue.js onNovember 23, 2020

Vue 框架早已经不是 MVVM(Mode-View-View-Model) 双向绑定了。早在 Vue 1.0 时代,Vue 在刚出世的时候的确是 MVVM 双向绑定。自 Vue 2.0 以来,Vue 就不再是双向绑定了,而是像 React 一样是单向绑定 MV(Model-View)了。但是,在 Vue 中仍保留了双向绑定的接口,v-model 就是。

1. 基本用法

<template>
 <div id="app">
  <input v-model="x">
  {{x}}
 </div>
</template>

<script>
export default {
 data(){
  return {
   x: 'init'
  }
 }
}

在 JS 中修改 x 的值,input 输入框里也会随之改变。同样地,在页面中的 input 输入框内手动输入值,变量 x 的值也会随之改变。对象里的变量改变会影响视图的 input 的改变,视图中 input 的改变会影响对象里变量 x 值的改变。这就是双向绑定(Model-View-View-Model)。

2. v-model

实质上述使用 v-model 的代码等价于如下代码:

<template>
 <div id="app">
  <input :value="x" @input="x = $event.target.value">
  {{x}}
 </div>
</template>

<script>
export default {
 data(){
  return {
   x: 'init'
  }
 }
}
</script>

v-model 帮我们做的事就是,为 input 的 value 值设置一个动态绑定,然后在输入框的 input 事件触发后实时修改动态绑定的 value 的变量值。因此 v-model 实质是上述方式的语法糖。

$event 是原生 DOM 事件里的 event 事件对象。

3. v-model 的修饰符

所有修饰符都是起一个辅助的作用,其实可以在函数里自己判断条件实现。.lazyv-model 默认监听的是输入框的input 事件,原生 DOM 的input 事件就是记录实时的输入变化值。但是,我们有时不需要实时记录结果,只需要记录最终输入的结果值就可以了。

input 的原生 DOM 事件中还有一个change 事件,该事件是在输入框失去焦点时 或 按下回车键时 执行的。v-model 里以.lazy 修饰符的方式切换至该监听模式。

<template>
 <div id="app">
  <input v-model.lazy="x">
  {{x}}
 </div>
</template>等价于:<template>
 <div id="app">
  <input :value="x" @change="x = $event.target.value">
  {{x}}
 </div>
</template>

.number.number修饰符是在输入内容改变后进行变量赋值时,自动使用 parseFloat() 函数将其变成数字。使用该修饰符时变量的初始值必须是数字。

<template>
 <div id="app">
  <input v-model.number="x">
  {{x}}
 </div>
</template>

<script>
export default {
 data(){
  return {
   x: 0
  }
 }
}
</script>
  • .trim

.trim修饰符是将输入的内容改变后进行变量赋值时,自动忽略和去除前后的空格。更为精准地记录输入的字符串内容。

<template>
 <div id="app">
  <input v-model.trim="x">
  {{x}}
 </div>
</template>

<script>
export default {
 data(){
  return {
   x: 'init'
  }
 }
}
</script>

4. 自定义输入框的 v-modelv-model

的基本用法仅仅适用于原生的输入框元素 ,对于用户自己封装的输入框,可以用如下方式使用 v-model。当用在组件上时,v-model 的实质如下:

<custom-input v-model="x"></custom-input>

等价于:

<custom-input :value="x" @input="x = $event"></custom-input>

因此,在自定义表单组件里的写法如下:

<template>
  <div class="wrapper">
    <input :value="value" @input="$emit('input', $event.target.value)">
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String
    }
  }
}
</script>

<style scoped>
  .wrapper{
    border: 2px solid blue;
    display: inline-block;
  }
  .wrapper input{
    color: red;
  }
</style>
<template>
 <div id="app">
  <MyInput v-model="x"/>
  {{x}}
 </div>
</template>

<script>
import MyInput from './components/MyInput'
export default {
 data(){
  return {
   x: 0
  }
 },
 components:{
  MyInput
 }
}
</script>

补充:若想在自定义组件里面的原生输入框也使用 v-model,可以根据组件 v-model 的实质,使用计算属性的赋值方式为=使用。

以上就是Vue 的 v-model用法实例的详细内容,更多关于vue v-model的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
VUE+Element实现增删改查的示例源码
Nov 23 #Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 #Vue.js
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 #Vue.js
详解vue 组件注册
Nov 20 #Vue.js
vue-drawer-layout实现手势滑出菜单栏
Nov 19 #Vue.js
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 #Vue.js
如何使用 vue-cli 创建模板项目
Nov 19 #Vue.js
You might like
php google或baidu分页代码
2009/11/26 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
js中document.write的那点事
2014/12/12 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
以下的初始化有什么区别
2013/12/16 面试题
假日旅行社实习自我鉴定
2013/09/24 职场文书
音乐表演专业毕业生求职信
2013/10/14 职场文书
给水工程专业毕业生自荐信
2014/01/28 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
学习决心书范文
2014/03/11 职场文书
孩子教育的心得体会
2014/09/01 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
士兵突击观后感
2015/06/16 职场文书
教师外出学习心得体会
2016/01/18 职场文书