Vue3条件渲染

v-if

说明：这个指令如果写在组件上的话，只有在其值为真的时候才会渲染

基本的使用方法：

<template>
<view v-if="flag">box1</view>
</template>

<script setup>
import {ref} from "vue";
const flag=ref(true)    //定义一个响应式布尔值，根据其值的真/假来控制是否显示组件
</script>
<style lang="scss" scoped>

</style>

v-else

说明：一般是会跟v-if一起连用，如果v-if的值为false的话就会渲染，定义的v-else的组件

基本的使用方法：

<template>
<view v-if="flag">box1</view>
<view v-else>box2</view>
</template>

<script setup>
import {ref} from "vue";
const flag=ref(false)    //值为flase不会渲染box1，会渲染box2
</script>
<style lang="scss" scoped>

</style>

注意：v-if和v-else连用的使用中间不能有任何的组件以及字符，要不然就会报语法错误，且v-else不能单独使用

v-else-if

说明：跟v-if连用，可以用多个v-else-if，并且可以在最后加上v-else

基本的使用方法：

<template>
	<view style="margin-top: 20px;">
		请输入今天星期几(阿拉伯数字1-7)：<input type="text" @input="onChangeInputValue" :class="'inputStyle'">
		<!-- @input文本框输入的时候触发的事件 -->
	</view>
	<view v-if="num===1">星期一</view>
	<view v-else-if="num===2">星期二</view>
	<view v-else-if="num===3">星期三</view>
	<view v-else-if="num===4">星期四</view>
	<view v-else-if="num===5">星期五</view>
	<view v-else-if="num===6">星期六</view>
	<view v-else-if="num===7">星期天</view>
	<view v-else>格式错误</view>
</template>

<script setup>
	import {ref} from "vue";
	const num = ref();

	function onChangeInputValue(e) {
		//为num赋文本框的值，以用于组件的判断
			num.value = parseInt(e.detail.value);
	}
</script>

<style lang="scss" scoped>
	.inputStyle {
		display: inline-block;
		vertical-align: middle;
		margin-left: 5px;
		border: 1px solid black;
		width: 70px;
	}
</style>

注意：在使用v-else-if的时候前面必须跟有一个v-if或者是前面已经跟有一个v-if的v-else-if的后面，v-else-if不能单独使用！

如果我们不想在不想再一些组件的外面套一个view容器来做v-if判断的话可以使用<template>，如：

<template>
	<view>1111</view>
	<template v-if="flag">
		<h1>2222</h1>
		<text>3333</text>
	</template>
</template>

<script setup>
	import {ref} from "vue";
	const flag=ref(true);
</script>

<style lang="scss" scoped>
	
</style>

可以看到h1、text和view组件是同一级别，并且template没有显示处理

v-show

说明：v-show和我们的v-if是一样的用法

基本的使用方法：

<template>
<view v-show="flag">box1</view>
</template>

<script setup>
import {ref} from "vue";
const flag=ref(true)    //定义一个响应式布尔值，根据其值的真/假来控制是否显示组件
</script>
<style lang="scss" scoped>

</style>

那为什么vue3还要设计这么一个v-show指令呢？

那么接下来就说说v-if和v-show的区别.

v-if和v-show的区别

<template>
	<view v-if="flag">box</view>
	<view v-show="flag">box2</view>
</template>

<script setup>
	import {ref} from "vue";
	const flag=ref(false);
</script>

<style lang="scss" scoped>
	
</style>

我们可以看到在页面上的显示是没有区别的，但是在我们浏览器的Elements的DOM树上v-if是显示一个带有"v-if"字样的注释，v-show而是通过style属性的display:node来隐藏元素。

更加直观的区别：

<template>
	<view v-if="flag">
		<image src="../../static/test.jpg" mode=""></image>
	</view>
	<view v-show="flag">
		<image src="../../static/test.jpg" mode=""></image>
	</view>
</template>

<script setup>
	import {ref} from "vue";
	const flag=ref(false);
</script>

<style lang="scss" scoped>
	
</style>

 总结：

用了v-if的组件，如果包含了图片等一些需要加载的资源的话，v-if其值为false时不会加载，但是，用了v-show的组件，即使其值为false时也会加载图片等资源，所以说如果加载的资源多了的话，从速度上可以理解用了v-if的组件加载更快节省加载时间，用了v-show的组件加载更加的慢，所以可以根据实际情况自行选择在开发过程中用哪一种。