vue 입력은 이전과 이후의 값을 수정합니다.-프런트엔드 Q&A-php.cn

vue 입력은 이전과 이후의 값을 수정합니다.

WBOY

풀어 주다： 2023-05-11 12:35:07

원래의

1211명이 탐색했습니다.

Vue는 반응형 구성 요소를 쉽게 만들 수 있는 인기 있는 JavaScript 프레임워크입니다. WEB 개발에서 컴포넌트의 입력 상자는 가장 일반적인 요소 중 하나입니다. 많은 시나리오에서 개발자는 입력 상자의 값을 추적하고 처리해야 합니다. 이 글에서는 Vue에서 입력 상자의 수정된 값을 처리하는 방법에 대해 설명합니다.

입력 상자 듣기

Vue는 입력 상자의 값을 모니터링할 수 있는 다양한 방법을 제공합니다. 가장 일반적인 방법은 v-model을 사용하는 것입니다. v-model 지시문은 양방향 바인딩을 구현합니다. 즉, 입력 상자에 대한 수정 사항이 구성 요소 인스턴스의 데이터 속성에 반영되고, 데이터 속성 값이 변경되면 입력이 상자도 해당 값이 자동으로 업데이트됩니다. v-model 。 v-model 指令实现了双向绑定，这意味着对输入框的修改将反映在组件实例中的数据属性上，并且当数据属性的值发生改变时，输入框中也会自动更新对应的值。

以下是一个简单的例子，演示了如何使用 v-model 监听一个文本输入框的值：

<template>
  <div>
    <label for="username">用户名:</label>
    <input id="username" v-model="username">
    <p>用户名: {{ username }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ""
    };
  }
};
</script>

로그인 후 복사

在上面的例子中，我们使用 v-model 绑定了一个文本输入框，并在组件实例中维护了一个 username 数据属性。当用户在输入框中输入值时， username 数据属性将自动更新，并且在模板中的差值表达式 {{ username }} 也将随之更新。

记录输入框修改前后的值

在一些场景中，我们需要知道输入框的修改前后的值。比如在表单中，我们希望能够跟踪用户所做的更改，并将这些更改保存到一个 changes 数组中以备后续使用。

在 Vue 中，我们可以使用 watch 来监控数据属性的变化。当数据属性的值发生改变时，我们可以使用 handler 函数来执行一些操作。

我们可以使用以下代码来记录单个输入框的修改前后值：

<template>
  <div>
    <label for="username">用户名:</label>
    <input id="username" v-model="username">
    <p>用户名: {{ username }}</p>
    <pre v-text="JSON.stringify(changes)">

로그인 후 복사

在上面的代码中，我们通过新增一个 changes 数组，来记录输入框的每次修改。我们稍微修改了 watch 选项中的 handler 函数，现在它将在输入框的值变化时被触发。当新值不等于旧值时，我们将前一个值和后一个值以对象的形式存入 changes 数组中。

记录多个输入框的值

在实际开发中，我们通常需要监控多个输入框的值。在这种情况下，我们可以使用一个格式相同的对象来存储所有的输入框更改。对象中的属性名是输入框的 ID 或名称，而属性值是一个对象，其中包含输入框修改前后的值。

<template> <div> <label for="username">用户名:</label> <input id="username" v-model="formData.username"> <p>用户名: {{ formData.username }}</p> <label for="email">邮箱:</label> <input id="email" v-model="formData.email"> <p>邮箱: {{ formData.email }}</p> <pre v-text="JSON.stringify(changes)">

vue 입력은 이전과 이후의 값을 수정합니다.

입력 상자 듣기

记录输入框修改前后的值

记录多个输入框的值

总结