Vue3中的v-model函数：双向数据绑定的应用-Vue.js-PHP中文网

Vue3中的v-model函数：双向数据绑定的应用

PHPz

发布： 2023-06-18 10:24:15

原创

2039 人浏览过

Vue是目前最流行的前端框架之一，它具有典型的MVC(Model-View-Controller)架构，方便集成数据和视图。在Vue 3中，v-model函数作为双向数据绑定的核心起到重要的作用。本文将会讨论这个函数在Vue应用中的常见应用。

原理
首先我们需要了解v-model函数的原理。通俗来说，v-model函数是将数据从模型绑定到视图的函数。当视图中的值发生变化时，v-model会将这个变化传回到对应的模型中。这种“互通有无”的机制是Vue实现数据双向绑定的基础。
实例
接下来，将结合一个简单的表单实例阐述v-model函数的用法。以下代码实现了一段简单的Vue模型：

<div id="app">
  <input type="text" v-model="message">
  <p>{{message}}</p>
</div>

登录后复制

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

登录后复制

这个模型提供一个单行文本框和一个段落组件，当输入文本框时，段落组件即时地展示出所输入的值。这种实现方式既方便又直观，无需使用方式和Vue1和Vue2中的模板语法类似。由此可见，v-model函数在Vue 3中更加简便易用。

修饰符
除了上述应用方式，v-model函数还提供了一些修饰符，可以优化实际应用体验。例如，在输入密码时，用户需要确认密码才能提交。

<div id="app">
  <input type="password" v-model.trim="password">
  <input type="password" v-model.trim="confirmpassword">
  <button @click="submit">Submit</button>
</div>

登录后复制

在该例子中，v-model函数修饰符trim去除了用户可能的无关字符输入。使用v-model函数修饰符还可以检查用户的输入是否符合规则，例如限制输入字符数量、限制输入字符种类等等。

自定义组件
如何在自定义Vue组件中使用v-model函数呢？Vue 3提供了自定义v-model函数的方式，例如下面的代码演示了一个自定义输入框组件：

<custom-input v-model="inputValue"></custom-input>

登录后复制

Vue.component('custom-input', {
  props: ['modelValue'],
  template: `
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    >
  `
})

登录后复制

在这个自定义组件中，搭配v-model函数的标准用法，prop传入了modelValue属性，输入框将会自动更新modelValue的值。