一,v-if
v-if
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染
代码示例:
<template>
<view class="">
<view v-if="shop">京东</view>
<view v-else>淘宝网</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
const shop=ref(true)
</script>
<style lang="scss" scoped>
</style>
也可以使用 v-else
为 v-if
添加一个“else 区块,如上为示例,返回true时为京东,返回false时为淘宝网。
注意: v-else
元素必须跟在一个 v-if
或者 v-else-if
元素后面,否则它将不会被识别
顾名思义,v-else-if
提供的是相应于 v-if
的“else if 区块”。它可以连续多次重复使用
和 v-else
类似,一个使用 v-else-if
的元素必须紧跟在一个 v-if
或一个 v-else-if
元素后面
(v-else
和 v-else-if
也可以在 <template>
上使用)
代码示例:
<template>
<view class="">
<view v-if="num===1">星期1</view>
<view v-else-if="num===2">星期2</view>
<view v-else-if="num===3">星期3</view>
<view v-else-if="num===4">星期4</view>
<view v-else-if="num===5">星期5</view>
<view v-else-if="num===6">星期6</view>
<view v-else>格式错误</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
const num=ref(3)
</script>
<style lang="scss" scoped>
</style>
二,v-show
另一个可以用来按条件显示一个元素的指令是 v-show
。其用法基本一样:
不同之处在于 v-show
会在 DOM 渲染中保留该元素;v-show
仅切换了该元素上名为 display
的 CSS 属性。
v-show
不支持在 <template>
元素上使用,也不能和 v-else
搭配使用
css行内样式来隐藏<uni-view style="display: none;">123</uni-vie
代码示例:
<template>
<view class="">
<view class="box1" v-if="false">
<image src="../../static/2.jpg" mode=""></image>
</view>
<view class="box1" v-show="true" >
<image src="../../static/3.jpg" mode=""></image>
</view>
</view>
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>