머리말
프론트엔드 개발에서 양식은 사용자 정보를 수집하고 상호 작용 효과를 얻는 데 없어서는 안 될 부분입니다. 그러나 파일을 비동기적으로 업로드해야 하는 등의 상황이 있습니다. 이때 페이지를 새로 고치지 않고 파일을 업로드해야 하며, 이때 부분 새로 고침을 수행하기 위해 양식을 숨길 수 있습니다.
그럼 Vue에서 양식을 숨기는 기능을 어떻게 구현하나요? 이 기사에서는 v-show, v-if 및 계산이라는 세 가지 방법을 소개합니다. 세 가지의 구현 원칙은 약간 다릅니다. 자세한 내용은 아래를 참조하세요.
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 값에 따라 양식이 표시되는지 여부를 결정합니다.
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를 사용하면 요소가 페이지에 렌더링되지 않을 때 리소스 소비를 줄일 수 있습니다.
계산된 속성은 메서드와 유사하게 구현되지만 캐싱 메커니즘은 메서드와 다릅니다. 즉, 계산된 속성은 종속성이 변경될 때만 재평가되며 캐시로 인해 여러 구성 요소가 동일한 계산된 속성을 호출하는 경우 한 번만 평가됩니다. 따라서 계산된 속성을 사용하면 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!