vuejs에서 v-show와 v-if의 차이점은 무엇입니까

차이점: 1. "v-if"는 DOM 요소를 DOM 트리에 동적으로 추가하거나 삭제하고, "v-show"는 DOM 요소의 표시 스타일 속성을 설정하여 가시성을 제어합니다. 2. 컴파일 프로세스가 다릅니다. 4. "v-if"의 전환 비용이 높고, "v-show"의 초기 렌더링 비용이 높습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

v-if와 v-show의 차이점

v-if 지시문과 v-show 지시문은 DOM기반으로 동적으로 제어할 수 있습니다. 값에 대한 code> 요소는 표시되고 숨겨집니다. v-if 및 v-show는 Vue의 내부 명령으로 일반적으로 사용됩니다. 명령의 내용은 값이 변경될 때 DOM에 특별한 동작을 적용하는 것입니다. v-if指令与v-show指令都可以根据值动态控制DOM元素显示隐藏，v-if和v-show属于Vue的内部常用的指令，指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。

描述

v-if

v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回truthy值的时候被渲染。

<div v-if="show">show</div>
<div v-else>hide</div>

v-show

v-show指令用法大致一样，不同的是带有v-show指令的元素始终会被渲染并保留在DOM中，v-show只是简单地切换元素的CSS property display。

<div v-show="show">show</div>

区别

• 实现方式: v-if是动态的向DOM树内添加或者删除DOM元素，v-show是通过设置DOM元素的display样式属性控制显隐。

• 编译过程: v-if切换有一个局部编译卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件，v-show只是简单的基于CSS切换。

• 编译条件: v-if是惰性的，如果初始条件为假，则什么也不做，只有在条件第一次变为真时才开始局部编译， v-show是在任何条件下都被编译，然后被缓存，而且DOM元素保留。

• 性能消耗: v-if有更高的切换消耗，v-show有更高的初始渲染消耗。

• 使用场景: v-if适合条件不太可能改变的情况，v-show

설명

v-if

🎜🎜v-if 지시문은 content , 이 콘텐츠는 지시문의 표현식이 truth 값을 반환하는 경우에만 렌더링됩니다. 🎜rrreee🎜🎜v-show🎜🎜🎜 v-show 지시문의 사용법은 거의 동일합니다. 차이점은 v-show 지시문이 있는 요소는 항상 DOM에서 v-show는 단순히 요소의 CSS 속성 표시를 전환합니다. 🎜rrreee🎜🎜차이🎜🎜

• 🎜구현: v - if가 DOM 트리에 DOM 요소를 동적으로 추가하거나 삭제하고 v-show가 DOM을 설정하는 경우 <code> 요소의 표시 스타일 속성은 가시성을 제어합니다. 🎜🎜
• 🎜컴파일 프로세스: v-if 전환에는 부분적인 컴파일 및 제거 프로세스가 있습니다. 전환 프로세스 중에 내부 이벤트 리스너와 하위 구성 요소가 적절하게 삭제되고 다시 빌드됩니다. v -show는 <code>CSS를 기반으로 한 간단한 스위치입니다. 🎜🎜
• 🎜컴파일 조건: v-if는 게으르고, 초기 조건이 false이면 아무것도 하지 않고, 조건이 처음으로 true가 될 때만 부분 컴파일을 시작합니다. v-show는 모든 조건에서 컴파일된 후 캐시되며 DOM 요소는 보존됩니다. 🎜🎜
• 🎜성능 소모: v-if는 전환 비용이 더 높고, v-show는 초기 렌더링 비용이 더 높습니다. 🎜🎜
• 🎜사용 시나리오: v-if는 조건이 변경될 가능성이 없는 상황에 적합하고, v-show는 조건이 자주 전환되는 상황에 적합합니다. . 🎜🎜🎜🎜관련 추천: "🎜vue.js Tutorial🎜"🎜

위 내용은 vuejs에서 v-show와 v-if의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!