一,v-if
v-if 指令用来条件渲染一块内容,内容只会在指令表达式满足条件时或者为true时才被渲染,
v-if=为“false” 或者不满足条件时不会显示内容。
代码示例:
<template>
<view class="box">
<view v-if="true">张三</view>
<view v-if="1===1">周一</view>
<view v-if="2===1">周二</view>
<view v-if="2===1">周三</view>
<view v-if="2===1">周四</view>
<view v-if="2===1">周五</view>
<view v-if="2===1">周六</view>
<view v-if="2===1">周末</view>
</view>
</template>
效果图:
<template>
<view class="box">
<view v-if="true">张三</view> <!-- 为true或者条件满足时显示。比如1等于1 -->
<view v-else-if="1===1">周一</view> <!-- 第一个v-if条件不满足来这里判断 -->
<view v-else>李四</view> <!-- 上面的条件都不满足时来这里判断 -->
</view>
</template>
不过我们一般都是把条件换成变量来进行判断
比如:
<view class="">
<view v-if="isBay===1">1</view>
<view v-else-if="isBay===1">2</view>
<view v-else>3</view>
</view>
<script setup>
import { ref } from 'vue';
const isBay=ref(1);
</script>
因为 v-if 是一个指令,必须依附于某个元素,如果我们想要切换不止一个元素,在这种情况下我们可以在一个 <template> 元素上使用 v-if,这只是一个不可见的包装器元素,最后渲染的结果并不会包含这个 <template> 元素。
代码示例:
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-else 和 v-else-if 也可以在 <template> 上使用
二,v-show
v-show类似于v-if
不同点在于 v-show 会在 DOM 渲染中保留该元素,v-show 仅切换了该元素上名为 display 的 CSS 属性。
v-show 不支持在 <template> 元素上使用,也不能和 v-else 搭配使用。
v-if和v-show为false时,v-if的浏览器上的结构是显示一个<!--v-if-->,而v-show则是通过
css行内样式来隐藏<uni-view style="display: none;">123</uni-vie
<view>
<view v-if="false">123</view>
<view v-show="false">123</view>
</view>