Vue 本地应用：v-model 指令详解与实例解析

2024-01-01 08:30:56

前言

在上一篇文章中，我们对 Vue.js 中的 v-on 指令进行了补充讲解，了解了它的更多用法。无论使用哪一种，都是在代码中为 HTML 元素绑定事件处理函数。而本文，我们将深入介绍 Vue.js 中的另一个核心指令 —— v-model 指令。它用于实现数据绑定和双向绑定，在 Vue.js 的开发中扮演着非常重要的角色。

一、v-model 指令语法介绍

1. 基本语法

v-model 指令的基本语法如下：

<input v-model="expression">

其中：

expression：一个 JavaScript 表达式，用于指定要绑定的数据属性。

2. 修饰符

v-model 指令还支持一些修饰符，可以用来修改它的行为。常用的修饰符有：

.lazy：延迟更新数据，直到元素失去焦点时才更新。
.number：将输入的值转换为数字类型。
.trim：在更新数据之前修剪输入的值。

3. 使用 v-model 指令实现双向绑定

v-model 指令最强大的功能之一就是可以实现数据绑定和双向绑定。所谓数据绑定，是指当数据模型发生变化时，视图也会随之更新；而双向绑定，是指视图发生变化时，数据模型也会随之更新。

为了实现双向绑定，需要同时使用 v-model 指令和 Vue.js 的响应式数据。响应式数据是通过 Vue.set() 方法或 Object.defineProperty() 方法创建的。

二、实例代码演示

1. 实例代码

以下是一个简单的实例代码，演示了如何使用 v-model 指令实现双向绑定：

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

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!'
    }
  })
</script>