文章目录
v-if条件渲染
v-if条件渲染，即在template中使用if-else逻辑表达式选择是否渲染某一变量。
v-if 、v-else 两者结合使用实现二选一，代码如下：
<template>
<view>
<view v-if="shop">京东</view>
<view v-else>淘宝</view>
</view>
</template>
<script setup>
import {ref} from "vue" ;
const shop = true
</script>
<style lang="scss" scoped>
</style>
在这段代码中，shop变量为真，因此显示"京东"，否则显示"淘宝"。
v-if、v-else搭配v-else-if实现多选一，代码如下：
<template>
<view>
<view v-if = "day === 1">星期一</view>
<view v-else-if = "day === 2">星期二</view>
<view v-else-if = "day === 3">星期三</view>
<view v-else-if = "day === 4">星期四</view>
<view v-else-if = "day === 5">星期五</view>
<view v-else-if = "day === 6">星期六</view>
<view v-else-if = "day === 7">星期日</view>
<view v-else >错误</view>
</view>
</template>
<script setup>
import {ref} from "vue" ;
const day = ref(4);
</script>
<style lang="scss" scoped>
</style>
根据day变量的值，会渲染出不同的v-else-if内容，若day没有对应的值，则渲染条件else报错。
v-if条件渲染和v-show的选择
两者条件为假时，实际显示效果其实是一样的，但内部运行方式不同。
v-if为假，该元素就不会被渲染，也就是说不会占用资源；v-show为假，元素依然会被渲染，只是它是以display属性加载的，依然会占用资源。另外，v-show 不支持在 template元素上使用，也不能和 v-else 搭配使用。
template元素
v-if必须依附于某个元素使用，但如果我们想让它作用于多个元素呢？可以用template给它打包起来，这是一种包装器元素，在最终的渲染结果中并不会显示template。