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中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
vue实现广告栏上下滚动效果
Nov 26 Vue.js
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
vuex的使用步骤
Jan 06 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 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 基于文件头的文件类型验证类函数
2012/05/01 PHP
php操作mongoDB实例分析
2014/12/29 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
popdiv
2006/07/14 Javascript
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
python网络编程学习笔记(四):域名系统
2014/06/09 Python
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
在python image 中实现安装中文字体
2020/05/16 Python
经典优秀个人求职信分享
2013/12/12 职场文书
商业融资计划书
2014/04/29 职场文书
校外活动方案
2014/08/28 职场文书
刑事代理授权委托书
2014/09/17 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
敬老院活动感想
2015/08/07 职场文书
禁毒心得体会范文
2016/01/15 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python