Vue에서 숨겨진 양식을 설정하는 방법

머리말

프론트엔드 개발에서 양식은 사용자 정보를 수집하고 상호 작용 효과를 얻는 데 없어서는 안 될 부분입니다. 그러나 파일을 비동기적으로 업로드해야 하는 등의 상황이 있습니다. 이때 페이지를 새로 고치지 않고 파일을 업로드해야 하며, 이때 부분 새로 고침을 수행하기 위해 양식을 숨길 수 있습니다.

그럼 Vue에서 양식을 숨기는 기능을 어떻게 구현하나요? 이 기사에서는 v-show, v-if 및 계산이라는 세 가지 방법을 소개합니다. 세 가지의 구현 원칙은 약간 다릅니다. 자세한 내용은 아래를 참조하세요.

1. v-show 명령 사용

v-show 명령은 DOM을 렌더링할 때 표시 및 숨기기만 제어합니다. 그러나 표시 요소는 여전히 DOM 구조에 존재하지만 스타일은 다릅니다.

샘플 코드:

<template>
  <div>
    <button @click="isShowForm = !isShowForm">显示/隐藏表单</button>
    <form v-show="isShowForm" @submit.prevent="handleSubmit">
      <input type="text" placeholder="请输入您的姓名" v-model="name" />
      <button type="submit">提交</button>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowForm: false,
      name: '',
    };
  },
  methods: {
    handleSubmit() {
      console.log(this.name);
      this.isShowForm = false;
    },
  },
};
</script>

위 코드의 구현은 버튼을 사용하여 양식의 표시 및 숨기기를 제어하는 ​​매우 간단합니다. v-show 명령은 isShowForm 데이터를 직접 바인딩하고 해당 값의 true 또는 false 값에 따라 양식이 표시되는지 여부를 결정합니다.

2. v-if 명령 사용

v-if 명령은 요소의 표시 및 숨기기를 제어하는 ​​데 여전히 비교적 일반적입니다. 차이점은 DOM에서 요소를 추가/제거한다는 것입니다.

샘플 코드:

<template>
  <div>
    <button @click="isShowForm = !isShowForm">显示/隐藏表单</button>
    <template v-if="isShowForm">
      <form @submit.prevent="handleSubmit">
        <input type="text" v-model="name" placeholder="请输入您的姓名" />
        <button type="submit">提交</button>
      </form>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowForm: false,
      name: '',
    };
  },
  methods: {
    handleSubmit() {
      console.log(this.name);
      this.isShowForm = false;
    },
  },
};
</script>

v-show와 달리 v-if는 DOM 생성 트리에 DOM 요소를 추가/제거합니다. 따라서 v-if를 사용하면 요소가 페이지에 렌더링되지 않을 때 리소스 소비를 줄일 수 있습니다.

3. 계산된 속성 사용

계산된 속성은 메서드와 유사하게 구현되지만 캐싱 메커니즘은 메서드와 다릅니다. 즉, 계산된 속성은 종속성이 변경될 때만 재평가되며 캐시로 인해 여러 구성 요소가 동일한 계산된 속성을 호출하는 경우 한 번만 평가됩니다. 따라서 계산된 속성을 사용하면 Vue.js에서 효과적인 성능 최적화를 달성할 수 있습니다.

샘플 코드:

<template>
  <div>
    <button @click="toggleForm">显示/隐藏表单</button>
    <form @submit.prevent="handleSubmit" v-if="shouldShowForm">
      <input type="text" v-model="name" placeholder="请输入您的姓名" />
      <button type="submit">提交</button>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowForm: false,
      name: '',
    };
  },
  computed: {
    shouldShowForm: function() {
      return this.isShowForm;
    },
  },
  methods: {
    toggleForm() {
      this.isShowForm = !this.isShowForm;
    },
    handleSubmit() {
      console.log(this.name);
      this.isShowForm = false;
    },
  },
};
</script>

위의 예에서는 메서드 함수를 계산된 속성으로 캡슐화합니다. 계산된 속성의 캐싱 기능으로 인해 shouldShowModal 값은 isShowForm 값이 동기적으로 변경되는 경우에만 적극적으로 다시 계산됩니다.

요약

이 세 가지 방법 모두 양식을 숨기는 효과를 얻을 수 있습니다. v-show는 CSS 스타일의 표시 및 숨기기를 제어하여 구현됩니다. v-if는 계산된 속성의 isShowForm 값을 처리하는 DOM 트리에 요소를 추가합니다. 다양한 시나리오에 대해 다양한 접근 방식을 취할 수 있습니다.

물론 특정 양식 컨트롤만 숨기려면 v-model 및 CSS 스타일을 사용하여 이를 달성할 수도 있습니다. 따라서 양식 숨기기와 같은 문제의 경우 실제 요구에 따라 가장 간단하고 효율적인 방법을 선택하는 것이 최선의 해결책입니다.

위 내용은 Vue에서 숨겨진 양식을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!