(十一)Vue之条件渲染

news2024/11/24 16:52:58

文章目录

  • v-if
    • 与v-else-if、v-else一起使用
  • v-show
  • 关于 `<template>`标签

Vue学习目录

上一篇:(十)Vue之绑定样式

v-if

v-if,默认为true,如果为false,底层实现是直接把这个节点删除
适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
写法:

  • (1)v-if=“xxx”
  • (2)v-else-if=“xxx”
  • (3)v-else=“xxx”

xxx为表达式或属性:

  • 表达式:表达式结果为true或false
  • 属性:会去Vue实例找这个属性。当然属性的值也应该是true或false
        <!--值为表达式-->
        <h2 v-if="false">表达式1,欢迎来到{{name}}</h2><br>
        <h2 v-if="true">表达式1,欢迎来到{{name}}</h2><br>
        <!--值为属性-->
        <h2 v-if="a">属性1,欢迎来到{{name}}</h2><br>
        <h2 v-if="b">属性2,欢迎来到{{name}}</h2><br>
		new Vue({
            el:'#root',
            data:{
                name:'条件渲染',
                a:false,
                b:true
            }
        });

效果:如果结果为false时,在浏览器渲染时直接没有这个节点
请添加图片描述
请添加图片描述

与v-else-if、v-else一起使用

v-if通常和v-else-if、v-else一起使用,但要求结构不能被“打断”。

		<h2>当前的n是:{{n}}</h2><br>
        <button @click="n++">点我n+1</button>
        <!--正常效果-->
        <h2>正常效果</h2>
        <div v-if="n === 1">Angular</div>
        <div v-else-if="n === 2">React</div>
        <div v-else-if="n === 3">Vue</div>
        <div v-else>哈哈</div>


        <!--打断效果-->
        <h2>打断效果</h2>
        <div v-if="n === 1">Angular</div>
        <div v-else-if="n === 2">React</div>
        <!--例如我这里打断,前面能够实现,后面就无效了-->
        <div>@</div>
        <div v-else-if="n === 3">Vue</div>
        <div v-else>哈哈</div>
	new Vue({
            el:'#root',
            data:{
                name:'条件渲染',
                n:0
            }
        });

效果:页面加载n为0,打断的后面就显示出来了,正常来说应该是显示‘哈哈’,并且控制台报错
在这里插入图片描述

请添加图片描述

v-show

v-show,默认为true,如果为false,底层实现是style=“display: none;”
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉

写法:v-show=“xxx”
xxx为表达式或属性:

  • 表达式:表达式结果为true或false
  • 属性:会去Vue实例找这个属性。当然属性的值也应该是true或false
        <!--值为表达式-->
        <h2 v-show="false">表达式1,欢迎来到{{name}}</h2><br>
        <h2 v-show="true">表达式2,欢迎来到{{name}}</h2><br>
        <!--值为属性-->
        <h2 v-show="a">属性1,欢迎来到{{name}}</h2><br>
        <h2 v-show="b">属性2,欢迎来到{{name}}</h2><br>
		new Vue({
            el:'#root',
            data:{
                name:'条件渲染',
                a:false,
                b:true
            }
        });

效果:如果结果为false时,在浏览器渲染时使用style="display: none;"进行隐藏。
在这里插入图片描述
在这里插入图片描述

关于 <template>标签

上面的程序只是展示一个元素,如果想切换多个元素呢?
方法一:可以使用div进行包裹,例如:

		<div v-if="n === 1">
            <h2>你好</h2>
            <h2>jack</h2>
            <h2>张三</h2>
        </div>
		<div v-show="n === 2">
            <h2>你好-1</h2>
            <h2>jack-1</h2>
            <h2>张三-1</h2>
        </div>

优缺点:优点是即可以使用v-if也可以使用v-show,缺点就是一定程度上会破坏结构,例如写了个h2样式,如果使用div包裹,就可能找不到这个h2标签。

方法二:使用template标签进行包裹
template有模板的意思,特点是不影响结构,对里面的东西进行了包裹,最终展示的时候会把template标签去掉,只显示里面的内容
需要注意的是template标签只能配合v-if进行使用,不能使用v-show
例如:

		<template v-if="n === 1">
            <h2>你好</h2>
            <h2>jack</h2>
            <h2>张三</h2>
        </template>
        <template v-if="n === 2">
            <h2>你好-1</h2>
            <h2>jack-1</h2>
            <h2>张三-1</h2>
        </template>

效果:
在这里插入图片描述
在这里插入图片描述
如果配合v-show:

		<template v-show="n === 1">
            <h2>你好</h2>
            <h2>jack</h2>
            <h2>张三</h2>
        </template>

效果:没有响应式,直接就展示到页面
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/80092.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MLE,MAP,经验风险最小化,结构风险最小化,邻域风险最小化

文章目录Maximun likelihood extimationMaximum A Posterior EstimationVicinal Risk Minimization, VRMMaximun likelihood extimation 最大似然估计:样本->参数,完全相信观测到的数据,最优可能产生这些看到的数据的模型就是最理想的模型. 频率学派认为,参数是一个常数,不…

fpga实操训练(基础)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 之前我们虽然说过怎么编写verilog代码&#xff0c;怎么用iverilog软件和gtkwave软件进行仿真验证&#xff0c;但是一直没有说明如何在真实的板子上…

web前端期末大作业——基于HTML+CSS+JavaScript仿蘑菇街时尚服装购物商城

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A…

28个你应该知道的JavaScript技巧

今天我将分享一些Javascript中的常用技巧&#xff0c;以帮助您解决问题。设置过程中的常见问题更快更容易。 01、Javascript 反向字符串 下面是代码&#xff1a; /*niemvuilaptrinh.com*/const stringReverse str > str.split("").reverse().join("")…

搜索引擎项目测试报告

目录单元测试构建索引模块文档信息对象Document的构建的单元测试**针对每一篇文档进行分析、处理、分词**针对文档内容提取关键字的测试&#xff08;正则表达式&#xff09;测试去掉script测试去掉标签完整测试Document类中的parseContent方法关于ansj分词器的测试关于构建倒排…

CleanMyMac4.12.2最新免费的macOS电脑清理工具

相信不少的小伙伴都在用苹果电脑&#xff0c;不论是 iMac&#xff0c;还是 MacBook&#xff0c;用着用着电脑就变慢了。这通病与苹果电脑的性能无关&#xff0c;主要是硬盘空间不足的问题&#xff01;当然你可以在购买电脑的时候就把硬盘升级&#xff0c;但主要的问题是 – 没有…

python代码圣诞树你还没有嘛?所有画法都在这篇文章里拉~

前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~ 今天&#xff0c;我就来给大家分享一下python制作的几种圣诞树吧~ 一&#xff1a;唯美圣诞 代码展示 导入模块 完整源码点击领取即可 import turtle as t from turtle import * import random as r import time n 100.0spee…

【JavaWeb】Tomcat的入门使用

1Tomcat的相关概念: Tomcat是Apache软件基金会一个核心项目&#xff0c;是一个开源免费的轻量级Web服务器&#xff0c;支持Servlet/JSP少量JavaEE规范。 概念中提到了JavaEE规范&#xff0c;那什么又是JavaEE规范呢? JavaEE: Java Enterprise Edition,Java企业版。指Java企业…

5年Java开发干到月薪38k?当初实习期2.5k的苦我也吃过...

每一个能在所属行业中成为佼佼者的人&#xff0c;一定都会有他自己的独到的见解以及成长方法......这个观点我非常认同&#xff0c;我不自诩自己是个大佬&#xff0c;但现在也算是做出了头&#xff0c;我从刚毕业做 Java 实习生月薪 2.5k&#xff0c;到现在干了 5 年 Java 开发…

仿雷速体育app踢足球tab

MyTabLayout MyTabLayout用法参照BaseLibrary的Demo GitHub仓库地址 效果图 引入 gradle allprojects {repositories {maven { url https://jitpack.io }} }implementation com.github.DL-ZhangTeng:BaseLibrary:2.3.0属性 MyTabLayout属性名描述&#xff1a;可参考原生控…

Chat GPT使用体验,它真的好厉害!!!

最近的chat GTP很火&#xff0c;起因是OpenAI发布了一个全新的聊天机器人模型。就连马斯克也在感叹“很多人疯狂地陷入了 ChatGPT 循环中”&#xff0c;“ChatGPT 好得吓人&#xff0c;我们离强大到危险的人工智能不远了”。 官方的介绍是&#xff0c;这一模型可以与人类进行谈…

人类特有本能:保护族群老弱病残

人有哪些特有的本能&#xff1f; - 知乎 对于动物群体来说&#xff0c;受伤了就不管了&#xff0c;自生自灭。对于人类来说&#xff0c;受伤了尽量照顾恢复。这看起来吃亏&#xff0c;实际上划算。一个成年人&#xff0c;长大需要20年&#xff0c;受伤恢复只要3个月。 远方青木…

全新CorelDRAW2023最新版矢量图软件功能简介

CorelDRAW2023简介 &#xff1a;设计绘画 CorelDraw 是一个绘图与排版的软件&#xff0c;它广泛地应用于商标设计、标志制作、模型绘制、插图描画、排版及分色输出等诸多领域。 作为一个强大的绘图软件&#xff0c;它被喜爱的程度可用下面的事实说明&#xff1a;用作商业设计和…

WPFUI LiveCharts使用记录(一)柱状图

前言&#xff1a;LiveCharts是一个图标控件库集&#xff0c;可以实现柱状图、折线图、饼图、仪表盘等图表控件。而且最新版本支持全平台使用&#xff0c;实现的样例展示可以点击查看作者Alberto Rodrguez的 github仓库 1.背景 1.1 新建项目 这篇文章使用的是.NET framework4.…

Foxmail升级后图片链接乱

升级后默认勾选了总是以纯文本格式阅读邮件。 在设置-高级-中取消勾选

ZooKeeper组件的核心知识总结,吐血总结,一文带你学会

文章目录数据模型数据存储Watch机制会话机制ACL权限序列化方式集群ZAB协议日志清理实现分布式锁实现分布式ID实现负载均衡开源框架使用案例Zookeeper 基本介绍Apache ZooKeeper 是由Apache Hadoop的子项目发展而来&#xff0c;为分布式应用提供高效且可靠的分布式协调服务。 在…

java计算机毕业设计ssm医院管理系统3w16k(附源码、数据库)

java计算机毕业设计ssm医院管理系统3w16k&#xff08;附源码、数据库&#xff09; 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。…

【应用】OPC 通讯协议

OPC 通讯协议OPC 通讯协议基础OPC 简介OPC 与 OPC UAOPC 逻辑对象模型OPC 通信方式Java 实现 OPC 的方式Java 实现 OPC-clientOPC-DAOPC-UA模拟数据进行代码测试OPC-DA 代码验证OPC-UA 代码验证OPC 通讯协议基础 OPC 简介 OPC 全称 OLE For Process Control&#xff0c;即用于…

8. 发布确认高级

二八佳人体似酥&#xff0c;腰间仗剑斩愚夫。虽然不见人头落&#xff0c;暗里教君骨髓枯。 在生产环境中由于一些不明原因&#xff0c;导致 rabbitmq 重启&#xff0c;在 RabbitMQ重启期间生产者消息投递失败&#xff0c; 导致消息丢失&#xff0c;需要手动处理和恢复。于是&am…

PyQt - 使用多线程避免界面卡顿

PYQT作为界面程序包&#xff0c;为Pythoner快速构建界面&#xff0c;提供了便利性。特别是结合Pycharm扩展工具&#xff08;QTdesigner&#xff09;能够通过“拖拖拽拽”的方式构建简单界面。通过UIC将UI文件快速转化为PY文件&#xff0c;节省了时间。 PYQT的项目实践&#xff…