Vue 조건부 렌더링 지침에 대한 자세한 설명: v-if 및 v-show

Vue에서는 v-if 및 v-show를 사용하여 요소나 템플릿의 렌더링을 제어할 수 있습니다. 그리고 v-if 및 v-show도 Vue에서 일반적으로 사용되는 내부 명령어입니다. 여기에 언급된 명령어는 v- 접두사가 붙은 특수 명령을 나타내는 지시문입니다. 명령어의 값은 바인딩 표현으로 제한됩니다. 값이 변경되면 DOM에 특별한 동작을 적용하는 것입니다. v-if和v-show来控制元素或模板的渲染。而v-if和v-show也属于Vue的内部常用的指令。这里所说的指令就是directive，指特殊的带有前缀v-的命令，指令的值限定为绑定表达式，指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。

v-if和v-show两个指令就是大家常说的条件渲染指令。（学习视频分享：vue视频教程）

v-if  : 条件分支指令

---

咱们先来看v-if指令。其作用就是根据表达式的值true或false在DOM中生成或者移除一个元素（或多个元素）。有点类似JavaScript中的if条件判断。在Vue中除了v-if也有v-else-if和v-else之类。

v-if

前面说到过v-if根据表达式来的值来判断在DOM中生成元素。比如：

<!-- template -->
<div>
    <h1 id="v-if的值为true时-显示这个div元素">v-if的值为true时，显示这个div元素</h1>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {

    }
})

这个时候<h1></h1>元素插入到div#app元素中，并渲染出来：

在Vue中，如果你需要让某个元素是否渲染，那就在该元素上添加v-if指令，并且设置其值为true或false。比如上面的示例，我们设置的是true，元素被渲染。如果把上面的true值换成false，<h1></h1>元素就不会渲染。

除了直接给v-if设置true或false之外，还可以通过表达式来做判断。比如：

<!-- template -->
<div>
    <h1>
    v-if的值为true时，显示这个div元素
    </h1>
</div>
// JavaScript
    var app = new Vue({
    el: '#app',
    data: { isShow: true }
})

上面的示例中，声明了isShow的值为true，然后在h1元素中，通过v-if指令绑定isShow。其实类似于v-if="true"。h1元素也正常渲染：

当你把isShow设置为false时，h1元素又不会渲染。

上面我们看到的是渲染一个元素,如果要渲染多个元素，那是不是直接里面嵌套多个元素呢？我们来验证一下自己的想法：

<!-- template -->
<div>
    <div>
        <h1 id="我是标题">我是标题</h1>
        <p>我是段落</p>
    </div>
</div>

和我们想像的一样。但在Vue中，我们切换多个元素一般不这么使用，而是配合<template></template>元素当做包装元素，并在上面使用v-if。最终的渲染结果不会包含<template></template>元素。如下所示：

<template>
    <h1 id="标题">标题</h1>
    <p>段落 1</p>
    <p>段落 2</p>
</template>

v-else

v-else和JavaScript中的else类似，但其要和v-if配合使用。比如我们做登录，如果登录了显示一个欢迎语，反则提示用户去登录。那么我们可以设置一个isLogined表达式，比如：

<!-- Template -->
<div>
    <h1 id="欢迎来到W-cplus">欢迎来到W3cplus！(^_^)</h1>
    <h1 id="请先登录-再来">请先登录，再来！(^_^)</h1>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {
        isLogined: true
    }
})

如你所想，你在浏览器能看到下图的效果：

把isLogined的值换成false，那么渲染出来的内容就变了：

在实际项目中，当我们一个组件在两种状态渲染的效果不一样的时候，这个时候使用v-if和v-else配合<template></template>就很好实现了。比如中奖和未中奖：

<template>
    <figure>
        <figcaption>恭喜你中了5元红包</figcaption>
        <img  src="/static/imghwm/default1.png" data-src="xxx" class="lazy" alt="Vue 조건부 렌더링 지침에 대한 자세한 설명: v-if 및 v-show" >
    </figure>
</template>

<template>
    <figure>
        <figcaption>亲，就差那么一点点</figcaption>
        <img  src="/static/imghwm/default1.png" data-src="xxx" class="lazy" alt="Vue 조건부 렌더링 지침에 대한 자세한 설명: v-if 및 v-show" >
    </figure>
</template>

v-else-if

v-else-if和JavaScript中的else if类似，需要和v-if配合在一起使用。当有几个条件同时在的时候，根据运算结果决定显示与否。如下面的代码，根据type的值决定显示哪一个区块。比如，我们的例子，设定的type的值B，那么就会显示区块B：

<!-- template -->
<div>
    <div>显示A区域</div>
    <div>显示B区域</div>
    <div>显示C区域</div>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {
        type: "B"
    }
})

如果修改type

v-if 및 v 두 개의 명령어 -show는 일반적으로 조건부 렌더링 명령어라고 합니다. (학습 영상 공유: vue 영상 튜토리얼)

v-if : 조건 분기 명령어

---

🎜먼저 v-if 명령어를 살펴보겠습니다. 그 기능은 true 또는 false 표현식의 값을 기반으로 DOM에서 요소(또는 여러 요소)를 생성하거나 제거하는 것입니다. 이는 JavaScript의 if 조건부 판단과 다소 유사합니다. Vue에는 v-if 외에도 v-else-if 및 v-else도 있습니다.
🎜

v-if

🎜 앞서 언급했듯이 v-if는 표현식 DOM에서 요소를 생성할지 여부를 결정합니다. 예: 🎜

<!-- Template -->
<div>
    <h1 id="我是一个标题">我是一个标题</h1>
    <p>我是一个段落</p>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {
        isShow: false
    }
})

🎜이 때 <h1></h1> 요소가 div#app 요소에 삽입되어 렌더링됩니다.
🎜🎜🎜🎜Vue에서 요소가 렌더링되는지 확인해야 하는 경우, 그런 다음 이 요소에 v-if 지시어를 추가하고 해당 값을 true 또는 false로 설정하세요. 예를 들어 위의 예에서는 true를 설정하고 요소가 렌더링됩니다. 위의 true 값이 false로 바뀌면 <h1></h1> 요소가 렌더링되지 않습니다. 🎜🎜true 또는 false를 v-if로 직접 설정하는 것 외에도 표현식을 통해 판단할 수도 있습니다. 예: 🎜rrreee🎜위의 예에서 isShow의 값은 true로 선언된 다음 h1 요소에서 다음을 전달합니다. v -if 지시문은 isShow를 바인딩합니다. 실제로 v-if="true"와 유사합니다. h1 요소도 정상적으로 렌더링됩니다:
🎜🎜🎜🎜 isShow를 false로 설정하면 h1 요소가 렌더링되지 않습니다. 🎜🎜🎜🎜위에서 볼 수 있는 것은 요소를 렌더링하는 것입니다. 여러 요소를 렌더링하려면 여러 요소를 내부에 직접 중첩해야 합니까? 우리의 아이디어를 검증해 봅시다: 🎜rrreee🎜🎜🎜 우리처럼 상상했다. 하지만 Vue에서는 여러 요소를 전환할 때 일반적으로 이 방법을 사용하지 않고 대신 <template></template> 요소를 패키징 요소로 사용하고 v-if를 입력하세요. 최종 렌더링 결과에는 <template></template> 요소가 포함되지 않습니다. 아래와 같이: 🎜rrreee🎜🎜

v-else

🎜v-else는 JavaScript의 else와 유사하지만 v-if와 유사합니다. 코드> >함께 사용하세요. 예를 들어 로그인하면 로그인하면 환영 메시지가 표시되고, 그렇지 않으면 사용자에게 로그인하라는 메시지가 표시됩니다. 그런 다음 다음과 같은 isLogined 표현식을 설정할 수 있습니다. 🎜rrreee🎜생각하시는 대로 브라우저에서 다음 그림의 효과를 볼 수 있습니다. 🎜🎜🎜🎜 isLogined 값을 false로 바꾸세요 , 렌더링된 콘텐츠가 다음과 같이 변경됩니다. 🎜🎜🎜 🎜실제 프로젝트에서 구성 요소가 두 가지 상태에서 다르게 렌더링되면 <template></template>와 함께 v-if 및 v-else를 사용합니다. 구현합니다. 예를 들어 승리와 실패: 🎜rrreee

v-else-if

🎜v-else-if 및 else if는 유사하며 <code>v-if와 함께 사용해야 합니다. 여러 조건이 동시에 존재할 경우, 연산 결과에 따라 표시 여부가 결정됩니다. 다음 코드와 같이 type 값에 따라 어떤 블록이 표시되는지가 결정됩니다. 예를 들어, 이 예에서 type 값이 B로 설정된 경우 B 블록이 표시됩니다. 🎜rrreee🎜If type 값을 수정하면 표시되는 영역이 달라집니다: 🎜🎜🎜🎜

v-show

---

文章开头提到过，除了v-if之外，Vue还提供v-show也可以控制元素的渲染。v-show和v-if功能有点相似，其中v-if依赖于控制DOM节点，而v-show是依赖于控制DOM节点的display属性。当v-show传入的值为true时，对应DOM元素的display的值为block之类的，反之为false时，display的值为none。也就是用户看不到元素的显示，但其DOM元素还是存在的。

<!-- Template -->
<div>
    <h1 id="我是一个标题">我是一个标题</h1>
    <p>我是一个段落</p>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {
        isShow: false
    }
})

在浏览器看到的效果将是这样的：

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

v-if Vs. v-show

---

v-if和v-show都能控制DOM元素的显示和隐藏，但是在切换v-if模块时，Vue有一个局部编译/卸载过程，因为v-if中的模板可能包括数据绑定或者子组件，v-if是真是的条件渲染，它会确保条件快在切换时合适的销毁与重建条件块内的时间监听器和子组件。

两者之间的具体区别，官网是这样描述的：

• v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
• 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

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

总结

---

这篇文章主要了解了Vue中的v-if和v-show。这两个都是Vue的内部指令，而且都是用来控制元素的渲染。只不过，v-if判断是否加载，可以减轻服务器的压力，在需要时加载;v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅。虽然这两都都能很好的控制元素的渲染，但实际使用的时候，更应该根据自己的场景来判断使用哪一个指令。

原文地址：:https://www.w3cplus.com/vue/v-if-vs-v-show.html

（学习视频分享：web前端开发、编程基础视频）

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