Vue 조건부 렌더링 지침에는 v-if, v-else, v-else-if 및 v-show가 포함됩니다. v-if 명령어는 조건부로 콘텐츠를 렌더링하는 데 사용됩니다. 이 콘텐츠는 명령어의 표현식이 참값을 반환할 때만 렌더링됩니다. v-else는 v-if, v에 "else 블록"을 추가할 수 있습니다. -else -if는 v-if에 "else if 블록"을 추가할 수 있습니다. v-show는 컨트롤 표시 속성에 따라 조건에 따라 요소나 구성 요소를 표시할지 여부를 결정합니다.
이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.
조건부 렌더링
v-show
아래에서 이에 대해 알아 보겠습니다.
v-if, v-else, v-else-if는 조건에 따라 특정 콘텐츠 블록을 렌더링하는 데 사용됩니다.
이 세 가지 명령은 JavaScript의 조건문 if, else if와 유사합니다.
v-if 명령은 콘텐츠를 조건부로 렌더링하는 데 사용됩니다. 지시문의 표현식이 true를 반환하는 경우에만 렌더링됩니다.
v-else는 v-if에 "else 블록"을 추가할 수 있습니다.
v-else-if는 v-if에 해당하는 "else if 블록"을 제공합니다. 여러 번 연속해서 재사용할 수 있습니다.
v-if 렌더링 원칙:
조건이 true이면 조건부 블록의 콘텐츠가 실제로 렌더링됩니다.
템플릿 요소를 보이지 않는 래핑으로 사용할 수 있습니다. element, and in v- if에 사용하지만 최종 템플릿은 렌더링되지 않습니다.
는 미니 프로그램의 블록과 다소 유사합니다
v-if, v-else에 대해 알아 보겠습니다. , v-else-if 예제를 통해 세 가지 지침을 제공합니다.
v-ifv-if前面说到过v-if根据表达式来的值来判断在DOM中生成元素。比如：
<!-- template -->
<div>
<h1>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>我是标题</h1> <p>我是段落</p> </div> </div>
和我们想像的一样。但在Vue中，我们切换多个元素一般不这么使用，而是配合<template></template>元素当做包装元素，并在上面使用v-if。最终的渲染结果不会包含<template></template>
v-if는 표현식의 값을 기반으로 DOM에 요소를 생성할지 여부를 결정합니다. 예:
<template> <h1>标题</h1> <p>段落 1</p> <p>段落 2</p> </template>
이 때 <h1></h1> 요소가 div#app 요소에 삽입되어 렌더링됩니다. 
🎜🎜Vue에서 요소가 렌더링되는지 확인해야 하는 경우, 그런 다음 이 요소에 v-if 지시어를 추가하고 해당 값을 true 또는 false로 설정하세요. 예를 들어 위의 예에서는 true를 설정하고 요소가 렌더링됩니다. 위의 true 값이 false로 바뀌면 <h1></h1> 요소가 렌더링되지 않습니다. 🎜🎜true 또는 false를 v-if로 직접 설정하는 것 외에도 표현식을 통해 판단할 수도 있습니다. 예: 🎜<!-- Template -->
<div>
<h1>欢迎来到W3cplus！(^_^)</h1>
<h1>请先登录，再来！(^_^)</h1>
</div>
// JavaScript
var app = new Vue({
el: '#app',
data: {
isLogined: true
}
})isShow의 값은 true로 선언된 다음 h1 요소에서 다음을 전달합니다. v -if 지시문은 isShow를 바인딩합니다. 실제로 v-if="true"와 유사합니다. h1 요소도 정상적으로 렌더링됩니다:
🎜🎜 isShow를 false로 설정하면 h1 요소가 렌더링되지 않습니다. 🎜🎜🎜🎜위에서 볼 수 있는 것은 요소를 렌더링하는 것입니다. 여러 요소를 렌더링하려면 여러 요소를 내부에 직접 중첩해야 합니까? 우리의 아이디어를 검증해 봅시다: 🎜<template> <figure> <figcaption>恭喜你中了5元红包</figcaption> <img alt="Vue 조건부 렌더링에는 무엇이 포함되나요?" > </figure> </template> <template> <figure> <figcaption>亲，就差那么一点点</figcaption> <img alt="Vue 조건부 렌더링에는 무엇이 포함되나요?" > </figure> </template>
🎜🎜 우리처럼 상상. 하지만 Vue에서는 여러 요소를 전환할 때 일반적으로 이런 방식으로 사용하지 않고 대신 <template></template> 요소를 패키징 요소로 사용하고 v-if를 사용합니다. 그것에. 최종 렌더링 결과에는 <template></template> 요소가 포함되지 않습니다. 아래와 같이: 🎜<!-- template -->
<div>
<div>显示A区域</div>
<div>显示B区域</div>
<div>显示C区域</div>
</div>
// JavaScript
var app = new Vue({
el: '#app',
data: {
type: "B"
}
})v-else和JavaScript中的else类似，但其要和v-if配合使用。比如我们做登录，如果登录了显示一个欢迎语，反则提示用户去登录。那么我们可以设置一个isLogined表达式，比如：
<!-- Template -->
<div>
<h1>欢迎来到W3cplus！(^_^)</h1>
<h1>请先登录，再来！(^_^)</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 alt="Vue 조건부 렌더링에는 무엇이 포함되나요?" > </figure> </template> <template> <figure> <figcaption>亲，就差那么一点点</figcaption> <img alt="Vue 조건부 렌더링에는 무엇이 포함되나요?" > </figure> </template>
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-show和v-if功能有点相似，其中v-if依赖于控制DOM节点，而v-show是依赖于控制DOM节点的display属性。当v-show传入的值为true时，对应DOM元素的display的值为block之类的，反之为false时，display的值为none。也就是用户看不到元素的显示，但其DOM元素还是存在的。
<!-- Template -->
<div>
<h1>我是一个标题</h1>
<p>我是一个段落</p>
</div>
// JavaScript
var app = new Vue({
el: '#app',
data: {
isShow: false
}
})在浏览器看到的效果将是这样的：
注意，
v-show不支持<template></template>语法，也不支持v-else。
위 내용은 Vue 조건부 렌더링에는 무엇이 포함되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
