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中使用mockjs代码实例
Nov 25 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
vue postcss-px2rem 自适应布局
May 15 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 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的库,结果发现很多东西
2006/12/31 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
Script的加载方法小结
2011/01/12 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
js Calender控件使用详解
2015/01/05 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
javascript的BOM汇总
2015/07/16 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
详细分析python3的reduce函数
2017/12/05 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
一文读懂Python 枚举
2020/08/25 Python
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
办理信用卡工作证明
2014/01/11 职场文书
施工安全协议书范本
2014/09/26 职场文书
胡桃夹子观后感
2015/06/11 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书