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.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
vue3.0中使用element的完整步骤
Mar 04 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue项目配置sass及引入外部scss文件
Apr 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
Zerg基本策略
2020/03/14 星际争霸
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
python三引号输出方法
2019/02/27 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
python怎么提高计算速度
2020/06/11 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
英国办公用品商店:Office Outlet
2018/04/04 全球购物
幼师自我鉴定
2014/02/01 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
小学见习报告
2014/10/31 职场文书
自我推荐信格式模板
2015/03/24 职场文书
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server
Python中的 enumerate和zip详情
2022/05/30 Python