Vue는 양식이 변경되었는지 확인합니다.

Vue는 대화형 웹 애플리케이션 구축을 위한 매우 인기 있는 프런트 엔드 프레임워크 중 하나입니다. Vue에서 양식은 핵심 기능 중 하나입니다. 양식은 사용자로부터 데이터를 수집하는 데 사용되는 HTML 요소입니다. 여기에는 텍스트 입력 상자, 드롭다운 목록, 라디오 버튼, 확인란 등과 같은 다양한 유형의 양식 요소가 포함될 수 있습니다. 그러나 Vue의 매우 실용적인 기능은 양식이 변경되었는지 확인하는 것입니다. 이는 일반적으로 사용자에게 저장되지 않은 변경 사항을 저장하라는 메시지 표시, 저장 버튼 비활성화 또는 활성화 등과 같은 일부 작업을 수행하는 데 사용할 수 있습니다. 이 글에서는 Vue를 사용하여 양식이 변경되었는지 확인하는 방법을 살펴보겠습니다.

1. v-model을 사용하여 양식 데이터 바인딩

Vue에서는 v-model 명령어를 사용하여 양식 데이터를 Vue 인스턴스의 데이터 객체에 바인딩합니다. 예를 들어, 텍스트 입력 상자에서 v-model 지시문을 사용하여 입력한 값을 Vue 인스턴스의 데이터 객체에 바인딩할 수 있습니다. 아래와 같이

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '' // 创建一个名为name的数据属性
    }
  }
}
</script>

위 코드는 텍스트 입력 상자를 생성합니다. 입력 상자의 값이 변경되면 Vue 인스턴스의 이름 데이터 속성이 그에 따라 변경됩니다.

2. 계산된 속성을 사용하여 양식이 변경되었는지 확인합니다.

Vue 인스턴스의 데이터 속성을 사용하여 양식의 현재 값을 저장할 수 있습니다. 하지만 양식이 변경되었는지 어떻게 알 수 있나요? Vue의 계산된 속성을 사용하여 이 문제를 해결할 수 있습니다. 계산된 속성은 다른 데이터 속성에서 값이 계산되는 Vue의 특수한 유형의 속성입니다. 예를 들어, 위 예에서는 아래와 같이 양식의 변경된 상태를 확인하기 위해 계산된 속성을 생성할 수 있습니다.

<template>
  <div>
    <input type="text" v-model="name">
    <p>表单是否改变: {{ isDirty }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '', // 创建一个名为name的数据属性
      originalName: '' // 创建一个名为originalName的数据属性，用于保存原始值
    }
  },
  computed: {
    isDirty() {
      return this.name !== this.originalName
    }
  },
  mounted() {
    this.originalName = this.name // 记录表单的原始值
  }
}
</script>

위 코드에서는 양식이 변경되었는지 여부를 결정하는 데 사용되는 계산된 속성 isDirty를 생성했습니다. 변경되었습니다. 계산된 속성의 값은 현재 양식 값과 원래 양식 값을 비교하여 계산됩니다. 원래 양식 값을 저장하기 위해 데이터 속성 originalName도 생성하고 해당 값을 마운트할 때 name의 초기 값으로 설정합니다. 양식 값이 변경되면 isDirty 계산 속성의 값도 변경됩니다.

3. watch를 사용하여 양식 값의 변경 사항을 모니터링하세요

Vue는 계산된 속성 외에도 데이터 속성의 변경 사항을 모니터링하기 위한 또 다른 특수 속성인 watch를 제공합니다. 감시 속성은 하나 이상의 데이터 속성의 변경 사항을 모니터링하고 데이터가 변경되면 특정 작업을 수행할 수 있습니다. 양식에서 watch 속성을 사용하여 아래와 같이 양식 값의 변경 사항을 모니터링할 수 있습니다.

<template>
  <div>
    <input type="text" v-model="name">
    <p>表单是否改变: {{ isDirty }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '', // 创建一个名为name的数据属性
      originalName: '' // 创建一个名为originalName的数据属性，用于保存原始值
    }
  },
  computed: {
    isDirty() {
      return this.name !== this.originalName
    }
  },
  mounted() {
    this.originalName = this.name // 记录表单的原始值
    this.$watch('name', (newValue, oldValue) => {
      if (newValue !== oldValue) {
        console.log('表单值改变')
        this.$emit('change') // 触发自定义事件change
      }
    })
  }
}
</script>

위 코드에서는 name 속성의 변경 사항을 모니터링하고 값이 변경될 때 해당 작업을 수행하는 watch 속성을 생성했습니다. . 이 예에서는 name 속성의 값이 변경되는 한 사용자 정의 이벤트 변경이 트리거됩니다. 이 이벤트는 상위 구성 요소에서 모니터링하고 처리할 수 있습니다.

4. v-once 명령을 사용하여 양식의 초기값 저장

양식의 초기값을 저장하는 또 다른 방법이 있는데, 그것은 v-once 명령을 사용하는 것입니다. v-once는 Vue의 지시어입니다. 해당 기능은 요소가 처음 바인딩될 때 한 번 바인딩되고 그 다음에는 요소가 업데이트되지 않습니다. v-once 지시문을 사용하여 텍스트 입력 상자의 값 속성에 양식의 초기 값을 저장합니다. 아래와 같이

<template>
  <div>
    <input type="text" v-model="name" v-once:value="originalName">
    <p>表单是否改变: {{ isDirty }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '' // 创建一个名为name的数据属性
    }
  },
  computed: {
    isDirty() {
      return this.name !== this.$el.querySelector('input').value
    },
    originalName() {
      return this.name // 返回表单的初始值
    }
  }
}
</script>

위 코드에서는 v-once 명령어를 사용하여 입력 요소의 value 속성을 바인딩하고 초기 값을 form 요소의 value 속성에 저장합니다. 계산된 속성인 originalName을 사용하면 양식이 변경되었는지 확인하기 위한 계산을 위해 isDirty 계산된 속성에 초기값을 반환할 수 있습니다.

Summary

Vue에서 양식이 변경되었는지 확인하는 것은 사용자에게 저장되지 않은 수정 사항을 저장하라는 메시지를 표시하고 저장 버튼을 비활성화 또는 활성화하는 데 사용할 수 있습니다. Vue는 데이터 속성, 계산된 속성, 감시 속성 및 v-once 지시문을 사용하는 등 이 기능을 달성하는 다양한 방법을 제공합니다. 적절한 방법을 선택하는 것은 실제 요구 사항과 특정 시나리오에 따라 달라집니다. 하지만 어떤 방법을 사용하더라도 양식의 초기값을 저장하고 적시에 상태를 업데이트하여 양식이 변경되었는지 확인해야 한다는 점을 기억해야 합니다.

위 내용은 Vue는 양식이 변경되었는지 확인합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!