vue v-model

一、为什么使用v-model?

v-model指令可以在表单input、textarea以及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。本质上是语法糖,负责监听用户的输入事件来更新数据。

二、什么场景下会使用v-model?

①表单提交。比如用户在检索、创建、更新信息时,需要提交一些数据。

②组件通信。

三、v-model原理

1、v-bind绑定value属性的值。

2、v-on绑定input事件监听到函数中,函数会获取最新的值赋值到绑定的属性中。

  • 在原生元素上使用:

    //模板编译器会对v-model进行更冗长的等价展开
    <input :value="searchText" @input="searchText = $event.target.value">

  • 在组件上使用:

    <CustomInput
    :modelValue="searchText"
    @update:modelValue="newValue => searchText = newValue"
    />
    //注:子组件默认接收和更新modelValue,modelvalue也可以自定义,如

CustomInput.vue组件有两种实现方式,如下:

复制代码
//方式一:<!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

//方式二:<!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>

<template>
  <input v-model="value" />
</template>
  • 多个v-model绑定:

    //父组件
    <UserName v-model:first-name="first" v-model:last-name="last" />
    //子组件

    <script> export default { props: { firstName: String, lastName: String }, emits: ['update:firstName', 'update:lastName'] } </script> <template> </template>

四、v-model是双向绑定,是单向数据流

单向数据流:父组件可以向子组件传递数据,并且改变子组件的值,而子组件不能改变父组件传递给它的prop属性,官方推荐的做法是它抛出事件,通知父组件自行改变绑定的值。

单向数据流总结:数据向下,事件向上。

五、v-model修饰符

  1. lazy作用:v-model在进行双向绑定时,绑定的是input事件,那么会在每次内容输入后就将最新的值和绑定的属性进行同步。v-model.lazy会将绑定的事件切换为change事件,只有在提交(比如回车)才会触发。

  2. number作用:v-model绑定的值最终都会转为string类型,及时设置type为number。
    v-model.number非数字以后的字符会被过滤,绑定的value类型隐士转换为number。

  3. trim作用:自动过滤用户输入的守卫空白字符(字符首尾的空格会被过滤)。
    注:修饰符可以串用(v-model.lazy.number.trim = 'value')

  4. 自定义修饰符capitalize:父组件使用v-model.capitalize,子组件的prop(modelModifiers)包含了capitalize且其值为true,默认返回一个空对象。

    <script> export default { props: { modelValue: String, modelModifiers: { default: () => ({}) } }, emits: ['update:modelValue'], created(){ console.log(this.modelModifiers) //{capitalize: true} } methods: { emitValue(e) { let value = e.target.value if (this.modelModifiers.capitalize) { value = value.charAt(0).toUpperCase() + value.slice(1) } this.$emit('update:modelValue', value) } } } </script> <template> </template>

六、vue3与vue2关于v-model的区别

①vue3默认prop、event为:modelValue和update:modelValue

vue2默认prop、event为:value和input

②vue3直接通过v-model后面参数v-model:msg来指定属性名,并且支持绑定多个v-model

vue2通过子组件的model属性中的prop值和event值来指定属性名和事件名。

相关推荐
daols886 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇6 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊6 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习7 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖7 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖8 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水8 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐8 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06278 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台8 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue