JZTXT

条件渲染

发布时间 2023-04-22 21:44:53作者: 宅马花子

v-if

只有当表达式值为真时才被渲染

<h1 v-if="awesome">Vue is awesome!</h1>

v-else

<button @click="awesome = !awesome">Toggle(切换)</button>
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no ?</h1>

v-else-if

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else> Not A/B</div>

<template>上的v-if

v-if是一个指令必须依附于某个元素上，当需要切换不止一个元素时，可以在一个<template>

元素上使用v-if，这只是一个不可见的包装器元素，最终将不会渲染<template>

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

 

v-show

同样用于有条件地显示一个元素

<h1 v-show="ok">Hello!</h1>

不同之处在于v-show会在DOM渲染中保留该元素，v-show仅切换了该元素上的名为display的CSS属性

注意：v-show不支持在<template>上使用，也不能和v-else搭配使用

v-if vs v-show

v-if是“惰性的”，“真实地”按条件渲染

v-show无论初始条件始终都会被渲染

总的来说，v-if有更高的切换开销而v-show有更高的初始渲染开销，因此如果需要频繁切换则建议使用v-show

 

v-if 和 v-for

不建议同时使用二者，因为它们的优先级不明显