在vue中提供了两种条件渲染方式:v-if
和v-show
,同时还有两者公共的v-else
,如下:
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
两者使用方法一样,但是在渲染时有所区别。
v-if是按需渲染,即真时才会渲染。
v-show是按需显示,即初始时就会渲染,但是真时才显示。
同时,我们还常和条件渲染一起使用template
标签,它是一个特殊标签,并不会实际渲染DOM内容,但注意,template不能作为根元素。
<div>
<template v-if="hello">{{hello}}</template>
</div>
- 你可以在官方文档查看更详细内容。