首页 > 其他分享 >day62-条件渲染

day62-条件渲染

时间:2023-01-17 11:55:05浏览次数:30  
标签:false name show 渲染 day62 条件 gugu

条件渲染

根据不同的条件进行相应的操作

v-show

当v-show=“false”该结构不在页面上显示

 使用v-show做条件渲染  
   <h2 v-show="false">欢迎来到{{name}}</h2>
   <h2 v-show="false">欢迎来到{{name}}</h2>

 

v-if

v-if可以搭配false和true或者表达式

v-if成立时该结构直接消失,在界面上被移除

同时v-if可以搭配v-else-if和v-else使用

 使用v-if做条件渲染  
   <h2 v-if="false">欢迎来到{{name}}</h2>
 ​
   <div v-if="n===1">gugu</div>
   <div v-else-if="n===2">mengmeng</div>
   <div v-else="n===3">nuonuo</div>

 

template

为了避免不必要的结构出现又保证代码简洁

使用template和v-if,不会影响代码的结构

 
<template v-if="n === 1">
 <!--    template只能和v-if配合使用    -->
         <h2>hello</h2>
         <h2>gugu</h2>
         <h2>henan</h2>
     </template>

 

总结

 <!--
     条件渲染:
         1.v-if
             v-if,v-else-if,v-else
             适用于:切换频率较低的场景
             特点,不展示的dom元素直接移除
             注意:v-if可以和v-else-if,v-else一起使用,但是结构不能被打断
         2.v-show
             v-show=“表达式”
             适用于:切换频率较高的场景
             特点:不展示的dom元素未被移除,仅仅是样式隐藏掉
         3.备注:使用v-if时,元素可能无法获取到,使用v-show一定能获取到
 ​
 -->

 

over

标签:false,name,show,渲染,day62,条件,gugu
From: https://www.cnblogs.com/GUGUZIZI/p/17057507.html

相关文章

  • MybatisPlus条件构造器
    Wrapper介绍​​Wrapper​​:条件构造抽象类,最顶端父类​​AbstractWrapper​​:用于查询条件封装,生成sql的where条件​​QueryWrapper​​:查询条件封装​​UpdateW......
  • iOS Swift圆角绘制与离屏渲染优化
    iOS里面使用圆角有可能造成离屏渲染,它需要开辟一个新的内存空间,做上下文切换(状态切换),并且渲染完成后还要进行拷贝操作,因此会造成一定的性能损耗,需要进行优化。1原理http......
  • sql 中where条件同时使用and和or注意事项
    sql的where查询条件同时使用and、or,注意使用括号括住查询条件,不然查询结果与预想的会不一样。如下sql,自己本意想查询asset_status='SETTLED'、settle_date为空,或者asse......
  • Unity URP Shader之眼睛渲染
    一,关于其理论知识的资料,参考如下:Next-GenerationCharacterRenderingPhotorealisticCharacterDigitalHumans剖析UnrealEngine超真实人类的渲染技术Part2-眼球渲......
  • Stata:条件判断
    多条件判断命令inlist、inrange,适用于重污染企业定义等keepifinlist(state,"AL","AK","AZ")*等价于:keepifstate=="AL"|state=="AK"|state=="AZ"keepifin......
  • .NetCore下基于FreeRedis实现的Redis6.0客户端缓存之缓存键条件优雅过滤
    前言众所周知内存缓存(MemoryCache)数据是从内存中获取,性能表现上是最优的,但是内存缓存有一个缺点就是不支持分布式,数据在各个部署节点上各存一份,每份缓存的过期时间不一......
  • Mybatis-plus条件构造器QueryWrapper的简单用法
    Mybatis-plus条件构造器QueryWrapper的简单用法1.首先来看下QueryWrapper有哪些常用方法查询方式 说明setSqlSelect 设置SELECT查询字段where WHERE语句,拼接+?WHE......
  • 【Unity渲染】一文看懂!Unity通用渲染管线URP介绍
    一、Unity通用渲染管线(URP)Unity的渲染管线包含内置渲染管线、SRP、URP和HDRP。自从Unity2019.3开始,Unity将轻量级渲染管线修改为了通用渲染管线,这是一种快速、可扩展的渲......
  • 如何不开Nuke实现批渲染.BAT
    如何在Windows上不启动Nuke实现Nuke工程的批量渲染,只适用于序列帧渲染,并不适用于mov。我们开始:1、你需要建立一个记事本,例如在桌面上创建2、将该文件命名为Nuke_Ba......
  • 使用虚拟 dom 渲染页面 《vue.js 设计与实现》
     使用js对象描述ui更加灵活。假如我们要根据级别不同采用不同的标签。js对象描述的话,只需要一个变量代表h标签即可。//当变量改变时,标签也会变化。letlevel=......