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项目实现主题切换的多种方法
Nov 26 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 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/10/09 PHP
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
python实现的文件同步服务器实例
2015/06/02 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
python多进程控制学习小结
2018/10/31 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
简述数组与指针的区别
2014/01/02 面试题
九月份红领巾广播稿
2014/01/22 职场文书
环境日宣传活动总结
2014/07/09 职场文书
公司授权委托书范本
2014/09/18 职场文书
三峡大坝导游词
2015/01/31 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS
Android中View.post和Handler.post的关系
2022/06/05 Java/Android