v-if条件渲染和v-show的选择对比

一，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>