Vue 2 中 v-model 指令的使用详解

最新推荐文章于 2025-02-27 00:30:35 发布

licy__

最新推荐文章于 2025-02-27 00:30:35 发布

阅读量1.7k

点赞数 12

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/licy__/article/details/144523684

版权

Vue 2 中 v-model 指令的使用详解

Vue 2 中 `v-model` 指令的使用详解

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架，它提供了多种指令来简化数据绑定和事件处理。在 Vue 2 中，v-model 是一个特别有用的指令，它提供了一种简洁的方式来进行双向数据绑定，特别是在表单元素（如输入框、文本区域、复选框、单选按钮等）上。本文将详细介绍 v-model 的用法、工作原理以及一些最佳实践，并通过具体的代码示例帮助你更好地掌握这一功能。

`v-model` 简介

v-model 是 Vue 提供的一个语法糖，它使得在表单控件元素与应用状态之间建立双向绑定变得非常简单。这意味着你可以轻松地将用户的输入反映到组件的状态中，并且当组件的状态发生变化时，相应的表单元素也会自动更新。

基本语法

<element v-model="expression"></element>

element：可以是任意 HTML 表单元素（如 <input>、<textarea>、<select>）或自定义组件。
expression：一个 JavaScript 表达式，通常是 Vue 实例中的一个数据属性。

使用场景与示例

示例 1：基础用法 - 文本输入框

最简单的 v-model 用法是在文本输入框上实现双向数据绑定：

<template>
  <div id="app">
    <input v-model="message" placeholder="Type something...">
    <p>{
  { message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

在这个例子中，每当用户在 <input> 中输入内容时，v-model 指令会自动更新 message 的值，而 { { message }} 则负责将这个值渲染为 <p> 元素中的文本内容。

示例 2：多行文本输入 - 文本区域

对于需要多行输入的情况，可以使用 <textarea> 标签：

<template>
  <div id="app">
    <textarea v-model="bio" placeholder="Tell us about yourself..."></textarea>
    <p>{
  { bio }}</p>
  </div>
</template>

<scr