Vue.js 조건부 렌더링에 대한 자세한 설명

이 기사에서는 주로 Vue.js 조건부 렌더링에 대한 자세한 설명을 공유합니다. 핸들바와 같은 문자열 템플릿에서는 다음과 같은 조건부 블록을 작성해야 합니다.

<!-- Handlebars 模板 -->{{#if ok}}
    <h1 id="Yes">Yes</h1>{{/if}}

Vue에서는 v를 사용합니다. -if 지시문은 동일한 기능을 수행합니다. <code>v-if 指令实现同样的功能：

<h1 id="Yes">Yes</h1>

也可以用 v-else 添加一个“else 块”：

<h1 id="Yes">Yes</h1>
No

# 在 <template></template> 元素上使用 v-if 条件渲染分组

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template></template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template></template> 元素。

<p id="example">
    <template v-if=&#39;ok&#39;>
        <h1 id="Title">Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template></p>

var vm = new Vue({
    el: '#example',    data: {
        ok: true
    }
})

# v-else 和 v-else-if

可以使用 v-else 指令来表示 v-if 的“else 块”：

<p v-if="Math.random() > 0.5">
    Now you see me</p>
<p v-else>
    Now you don&#39;t
</p>

<p v-if="type === &#39;A&#39;">
    A
</p>
<p v-else-if="type === &#39;B&#39;">
    B
</p>
<p v-else-if="type === &#39;C&#39;">
    C
</p>
<p v-else>
    Not A/B/C
</p>

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。

<h1 id="Hello">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

注意，v-show 不支持 <template></template> 元素，也不支持 v-else。

v-if vs v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-if

在字符串模板中，比如 Handlebars，我们得像这样写一个条件块：

<!-- Handlebars 模板 -->{{#if ok}}
    <h1 id="Yes">Yes</h1>{{/if}}

在 Vue 中，我们使用 v-if 指令实现同样的功能：

<h1 id="Yes">Yes</h1>

也可以用 v-else 添加一个“else 块”：

<h1 id="Yes">Yes</h1>
No

# 在 <template></template> 元素上使用 v-if 条件渲染分组

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template></template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template></template> 元素。

<p id="example">
    <template v-if=&#39;ok&#39;>
        <h1 id="Title">Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template></p>

var vm = new Vue({
    el: '#example',    data: {
        ok: true
    }
})

# v-else 和 v-else-if

可以使用 v-else 指令来表示 v-if 的“else 块”：

<p v-if="Math.random() > 0.5">
    Now you see me</p>
<p v-else>
    Now you don&#39;t
</p>

<p v-if="type === &#39;A&#39;">
    A
</p>
<p v-else-if="type === &#39;B&#39;">
    B
</p>
<p v-else-if="type === &#39;C&#39;">
    C
</p>
<p v-else>
    Not A/B/C
</p>

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。

<h1 id="Hello">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

注意，v-show 不支持 <template></template> 元素，也不支持 v-else。

v-if vs v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-showrrreee

v-else를 사용하여 "else 블록"을 추가할 수도 있습니다: 🎜rrreee🎜# in 조건부 렌더링 그룹화를 위해 요소에 v-if 사용🎜🎜v-if는 지시문이므로 템플릿에 추가해야 합니다. 요소. 하지만 여러 요소를 전환하고 싶다면 어떻게 해야 할까요? 이때 <template></template> 요소를 보이지 않는 래핑 요소로 처리하고 해당 요소에 v-if를 사용할 수 있습니다. 최종 렌더링에는 <template></template> 요소가 포함되지 않습니다. 🎜rrreeerrreee🎜# v-else 및 v-else-if🎜🎜v-else를 사용할 수 있습니다 v-if의 "else 블록"을 나타내는 명령: 🎜rrreeerrreee🎜v-else 요소 바로 뒤에는 v-if 또는 요소 뒤의 v-else-if, 그렇지 않으면 인식되지 않습니다. 🎜🎜v-else와 유사하게 v-else-if 뒤에도 v-if 또는 v-else가 와야 합니다. if 요소 뒤에. 🎜

v-show

🎜조건에 따라 요소를 표시하는 또 다른 옵션은 v-show 지시어입니다. 🎜rrreee🎜차이점은 v-show가 있는 요소는 항상 렌더링되고 DOM에 남아 있다는 것입니다. v-show는 단순히 요소의 CSS 속성 표시를 전환합니다. 🎜🎜v-show는 <template></template> 요소나 v-else를 지원하지 않습니다. 🎜

v-if 대 v-show

🎜v-if는 이벤트 리스너와 하위 구성 요소가 파괴되고 다시 생성되도록 보장하기 때문에 "실제" 조건부 렌더링입니다. 적절하게. 🎜🎜v-if도 게으릅니다. 초기 렌더링에서 조건이 false이면 아무 작업도 수행되지 않습니다. 조건이 처음 true가 될 때까지 조건 블록 렌더링이 시작되지 않습니다. 🎜🎜 이에 비해 v-show는 훨씬 간단합니다. 요소는 초기 조건에 관계없이 항상 렌더링되며 CSS를 기반으로 간단히 전환됩니다. 🎜🎜일반적으로 v-if는 전환 오버헤드가 더 높고, v-show는 초기 렌더링 오버헤드가 더 높습니다. 따라서 매우 자주 전환해야 하는 경우에는 v-show를 사용하는 것이 좋으며, 런타임 시 조건이 거의 변경되지 않으면 v-if를 사용하는 것이 좋습니다. 🎜

v-if

🎜Handlebars와 같은 문자열 템플릿에서는 다음과 같은 조건부 블록을 작성해야 합니다. 🎜rrreee🎜Vue에서는 v-if 지시문을 사용합니다. 동일한 기능을 얻으려면: 🎜rrreee🎜 v-else를 사용하여 "else 블록"을 추가할 수도 있습니다. 🎜rrreee🎜# <template></template>에 사용 > 요소 v-if 조건부 렌더링 그룹화🎜🎜 v-if는 지시문이므로 요소에 추가해야 합니다. 하지만 여러 요소를 전환하고 싶다면 어떻게 해야 할까요? 이때 <template></template> 요소를 보이지 않는 래핑 요소로 처리하고 해당 요소에 v-if를 사용할 수 있습니다. 최종 렌더링에는 <template></template> 요소가 포함되지 않습니다. 🎜rrreeerrreee🎜# v-else 및 v-else-if🎜🎜v-else를 사용할 수 있습니다 v-if의 "else 블록"을 나타내는 명령: 🎜rrreeerrreee🎜v-else 요소 바로 뒤에는 v-if 또는 요소 뒤의 v-else-if, 그렇지 않으면 인식되지 않습니다. 🎜🎜v-else와 유사하게 v-else-if 뒤에도 v-if 또는 v-else가 와야 합니다. if 요소 뒤에. 🎜

v-show

🎜요소를 조건부로 표시하는 또 다른 옵션은 v-show 지시어입니다. 🎜rrreee🎜차이점은 v-show가 있는 요소는 항상 렌더링되고 DOM에 남아 있다는 것입니다. v-show는 단순히 요소의 CSS 속성 표시를 전환합니다. 🎜🎜v-show는 <template></template> 요소나 v-else를 지원하지 않습니다. 🎜

v-if 대 v-show

🎜v-if는 이벤트 리스너와 하위 구성 요소가 파괴되고 다시 생성되도록 보장하기 때문에 "실제" 조건부 렌더링입니다. 적절하게. 🎜🎜v-if도 게으릅니다. 초기 렌더링에서 조건이 false이면 아무 작업도 수행되지 않습니다. 조건이 처음 true가 될 때까지 조건 블록 렌더링이 시작되지 않습니다. 🎜🎜 이에 비해 v-show는 훨씬 간단합니다. 요소는 초기 조건에 관계없이 항상 렌더링되며 CSS를 기반으로 간단히 전환됩니다. 🎜

일반적으로 v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if가 더 좋습니다.

관련 권장 사항:

Vue.js—조건부 렌더링

위 내용은 Vue.js 조건부 렌더링에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!