首页 > 其他分享 >v-if条件渲染和v-show的选择对比

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

时间:2024-09-02 15:26:13浏览次数:15  
标签:渲染 元素 示例 else 123 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>

标签:渲染,元素,示例,else,123,show,对比
From: https://blog.csdn.net/jsjdcjd/article/details/141814825

相关文章

  • 图的表示与查询:散列表与链表的对比
    图的表示与查询:散列表与链表的对比一、引言二、使用散列表表示图的边伪代码实现如下:C代码实现如下:三、期望时间分析四、散列表表示的缺陷五、使用链表表示图的边伪代码实现如下:六、链表表示的缺陷七、结论摘要:本文探讨了图的表示方法,特别是针对边......
  • 源代码怎么进行加密?不会影响对比合并!10款加密软件推荐
    随着企业数字化转型的推进,源代码成为了企业知识产权保护的重要组成部分。源代码的泄露可能会导致商业秘密的外泄、竞争优势的丧失以及潜在的法律纠纷。因此,对源代码进行加密保护变得尤为重要。1.安秉源代码加密软件安秉源代码加密软件是一款专为企业设计的源代码保护解决方......
  • 前端框架对比
     前端框架的性能是选择合适框架时的一个重要考量因素。以下是一些流行前端框架的性能对比,包括React、Vue和Angular的一些关键点:React虚拟DOM:React使用虚拟DOM进行高效的更新和渲染,只更新实际发生变化的部分,减少了对真实DOM的操作,提高了性能。组件重用:提供组......
  • Java异步编程:CompletableFuture与Future的对比
    Java异步编程:CompletableFuture与Future的对比大家好,我是微赚淘客返利系统3.0的小编,是个冬天不穿秋裤,天冷也要风度的程序猿!在Java中,异步编程是一种常见的编程范式,用于提高应用程序的响应性和吞吐量。Java提供了多种异步编程工具,其中Future和CompletableFuture是两个重要的接口。......
  • v-if与v-show的区别和v-for的列表渲染
    1.v-if与v-show的区别和用法1.v-if的用和注意事项当我们需要做一个因为客户做出了不同的选择出现了不同的结果或者选择,但是这些结果或者选项又都是在我们同一个的页面的时候需要我们使用什么组件。我们可以去Vue.js去了解一下这种类型的组件比如我们的v-if、v-else、v-else-......
  • computed计算属性及方法对比和循环遍历统计以及watch和watchEect监听的用法
    1.computed计算属性及方法对比1.了解computed计算属性和用法在我们的一些应用中可以看的应用会给我们提供一些计算类的功能比如取名,它会给你提供两个输入框,然后在你给这两个输入框输入值的时候会在下方生成你输入这个两个值的结合值,就比如你先输入了一个姓氏,然后输入一个名,下......
  • Dify 与 FastGPT 流程编排能力对比分析
    Dify与FastGPT流程编排能力对比分析一、引言在人工智能快速发展的今天,大语言模型(LLM)应用平台正在重塑各行各业的工作流程。其中,Dify和FastGPT作为两款具有重要影响力的工具,凭借各自独特的流程编排能力,为开发者和使用者提供了强大的支持。流程编排的优劣直接影响着......
  • vue3 jsx响应式渲染变量
    1、JSX渲染变量vue在html代码区渲染变量使用双大括号{{}},jsx在渲染是单大括号{}另外,这里随便记一下一个简单有点绕的业务逻辑2、多个变量影响判断三元表达式根据上图,想要的效果分别是:订单状态是否支付,显示对应状态已支付的订单是否申请开发票,显示对应状态;且已申请的无法......
  • 人像比对-人证比对-人脸身份证比对-人脸身份证实名认证-人脸三要素对比-实人认证
    ​人证比对API接口,全称为人脸身份证比对API接口,也被称为人脸实名认证API接口或实人认证API接口。这种接口服务主要用于将提供的人脸图片和对应的身份证照片、姓名、身份证号码进行比对,以此验证用户的身份。以下是关于人证比对API接口的详细介绍:一、接口功能人证比对接口基......
  • 渲染加速新选择:GPU云渲染平台的全方位评估
    在当今快速发展的数字时代,视觉内容的创造和呈现已成为各行各业的共同需求。无论是电影制作、游戏开发还是建筑设计,高质量的视觉输出都是不可或缺的。GPU云渲染平台以其强大的计算能力和灵活性,为这些行业提供了一种全新的解决方案。GPU云渲染平台概述基本概念:GPU云渲染平台是一......