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 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
vue3.0中使用element的完整步骤
Mar 04 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
ant design vue的form表单取值方法
Jun 01 Vue.js
Vue router配置与使用分析讲解
Dec 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中文件上传的一个问题
2010/09/04 PHP
php文本转图片自动换行的方法
2013/03/13 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
js arguments,jcallee caller用法总结
2013/11/30 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
Python多线程爬虫简单示例
2016/03/04 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
python实现图像识别功能
2018/01/29 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
Python-jenkins模块获取jobs的执行状态操作
2020/05/12 Python
分家协议书
2014/04/21 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
升学宴答谢词
2015/01/05 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
庭外和解协议书
2016/03/23 职场文书
mysql幻读详解实例以及解决办法
2022/06/16 MySQL