Vue 的 v-model用法实例

更新时间：2020年11月23日 09:22:52 作者：有野心的露娜

这篇文章主要介绍了Vue 的 v-model用法实例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下

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
v-model

vue初尝试--项目结构(推荐)
这篇文章主要介绍了vue初尝试--项目结构的相关知识,需要的朋友可以参考下
2018-01-01
Vue弹窗的两种实现方式实例详解
这篇文章主要介绍了Vue弹窗的两种实现方式,一种使用.sync修饰符另一种使用v-model，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-08-08
解析Vue.use()是干什么的
今天通过本文给大家分享Vue.use是什么，主要包括vueEsign 插件的install是什么，element-ui的install是什么，为什么有的库就不需要使用Vue.use，对vue.use()相关知识感兴趣的朋友一起看看吧
2022-06-06
vue-treeselect显示unknown的问题及解决
这篇文章主要介绍了vue-treeselect显示unknown的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
Vue插槽的作用
插槽（slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。可以把插槽认为是组件封装期间，为用户预留的内容的占位符
2022-09-09
VueCli生产环境打包部署跨域失败的解决
这篇文章主要介绍了VueCli生产环境打包部署跨域失败的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
封装 axios+promise通用请求函数操作
这篇文章主要介绍了封装 axios+promise通用请求函数操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
在vue中动态添加class类进行显示隐藏实例
今天小编就为大家分享一篇在vue中动态添加class类进行显示隐藏实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue使用codemirror的两种用法
这篇文章主要介绍了在vue里使用codemirror的两种用法,每种方法通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-08-08
vue2.0 与 bootstrap datetimepicker的结合使用实例
本篇文章主要介绍了vue2.0 与 bootstrap datetimepicker的结合使用实例，非常具有实用价值，需要的朋友可以参考下
2017-05-05

Vue 的 v-model用法实例

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具