vueDay04——v-if else show

一、v-if的使用

我们可以像c语言一样去使用v-if结构

比如单用v-if,连用v-if  v-else,或者是v-if v-else-if v-else

注意:

1.v-if v-else-if需要绑定值,而v-else不需要绑定值

2.if结构可以用在不同的标签类型之间

<div v-if="firstShowFlag">first被渲染
</div>
<div v-else-if="secondShowFlag">second被渲染
</div>
<p v-else>third被渲染
</p>

我们可以利用一个button绑定一个方法区实现某些样式的切换,但是感觉不如class与style绑定来的实在,但是好处是逻辑比较清晰,如果用绑定的方式不容易一眼看出逻辑

    <button @click="changevalue">点击我进行切换</button><div v-if="showFlag"><h1>Vue is awesome!</h1></div><div v-else><h1>Oh no 😢,我是菜🐔</h1></div>
const showFlag = ref(true)
const changevalue = () => {showFlag.value = !showFlag.value
}

还有一点template上的v-if这个没看懂,草草草草草

二、v-if和v-show的大同小异

相同点就是,他们二者都可以控制标签是否渲染,可以选择性的控制元素的显示

不同点就是 

1.v-show不支持在template上面使用

2.v-show并不会擦除本身标签,而是切换了一个叫display的CSS样式

3.v-if每次都会被销毁或者创建,而v-show只会将其藏起来或者显示出来

4.v-if只有在第一次为true的时候才会渲染 而v-show不管怎么都会渲染

三、全部代码

 

<template v-if="trueFlag"><button @click="changevalue">点击我进行切换</button><div v-if="showFlag"><h1>Vue is awesome!</h1></div><div v-else><h1>Oh no 😢,我是菜🐔</h1></div>
</template><script lang="ts" setup>
// import { defineComponent } from '@vue/composition-api'
import { ref } from 'vue'
// false true
const booleanFlagArray = ref([false,false,false]) 
const firstShowFlag = ref(booleanFlagArray.value[0])
const secondShowFlag = ref(booleanFlagArray.value[1])
const thirdShowFlag = ref(booleanFlagArray.value[2])const showFlag = ref(true)
const falseFlag = ref(false)
const trueFlag = ref(true)const changevalue = () => {showFlag.value = !showFlag.value
}
</script>

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

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

相关文章

[Unity]给场景中的3D字体TextMesh增加描边方案一

取你的文本对象&#xff0c;简单地添加以下脚本: using UnityEngine; using System.Collections; using UnityEngine.UI;public class TextOutline : MonoBehaviour {public float pixelSize 1;public Color outlineColor Color.black;public bool resolutionDependant fal…

整理指定文件夹下的所有文件,以类树状图显示并生成对应超链接

最近在整理家里学习资料的时候&#xff0c;由于年代久远&#xff0c;找不到我想要找的文件&#xff0c;windows文件搜索速度感觉太慢。于是想要生成一份类似文件索引的东西来显示所有资料&#xff0c;让我可以快速的找到需要的资料路径 直接上代码 import os import datetim…

【LeetCode】每日一题最后一个单词的长度投票法求解多数元素异或操作符巧解只出现一次的数字整数反转

个人主页直达&#xff1a;小白不是程序媛 LeetCode系列专栏&#xff1a;LeetCode刷题掉发记 目录 LeetCode 58.最后一个单词的长度 LeetCode169.多数元素 LeetCode 136.出现一次的数字 LeetCode 7.整数反转 LeetCode 58.最后一个单词的长度 难度&#xff1a;简单 OJ链接…

软件兼容性测试对软件产品起到什么作用?CMA、CNAS软件测评中心分享

软件兼容性测试是指检查软件之间能否正确地进行交互和共享信息。随着用户对来自各种类型软件之间共享数据能力和充分利用空间同时执行多个程序能力的要求&#xff0c;测试软件之间能否协作变得越来越重要。软件兼容性测试工作的目标是保证软件按照用户期望的方式进行交互。 1、…

各品牌PLC存储器寻址的规则

在PLC编程时&#xff0c;字节或多字节的变量一般支持绝对地址寻址&#xff08;比如&#xff0c;IW0、MD4等&#xff09;。要想正确寻址&#xff0c;则必须要搞清楚寻址的规则。目前常见的规则有两种&#xff1a;字节寻址和字寻址。下图清晰地表达了两种规则的编号情况&#xff…

React介绍

React介绍 学习目标&#xff1a;了解React是什么以及它的特点 React是什么 React是一个来自FaceBook的专注于构建用户界面的javascript库&#xff0c;与Vue和Angular并称为前端三大框架&#xff0c;目前是世界范围内最流行的js前端框架   React英文文档&#xff08;https:/…

Ubuntu18.04创建用户缺少默认的下载、桌面目录

Ubuntu18.04创建用户缺少默认的下载、桌面目录 创建用户缺少默认的下载、桌面目录等默认目录 创建用户缺少默认的下载、桌面目录等默认目录 在存在桌面版本的ubuntu系统中&#xff0c;在终端使用命令创建用户&#xff0c;丹是 sudo useradd -m liyao -d /home/liyao -s /bin/b…

MySQL---JDBC编程

文章目录 什么是JDBC&#xff1f;JDBC的工作原理JDBC的使用添加依赖创建数据源DataSource创建数据库连接Connection创建操作命令Statement执行SQL指令释放资源 通过JDBC演示CRUD新增查询修改删除 什么是JDBC&#xff1f; JDBC&#xff1a;Java Database Connectivity&#xff…

Docker从入门到实战

Docker基本概念 1、解决的问题 1、统一标准 应用构建 ○ Java、C、JavaScript ○ 打成软件包 ○ .exe ○ docker build … 镜像应用分享 ○ 所有软件的镜像放到一个指定地方 docker hub ○ 安卓&#xff0c;应用市场应用运行 ○ 统一标准的 镜像 ○ docker run 容器化技术 …

小插曲 -- 使用Visual Studio Code远程连接香橙派

在之前的学习中&#xff0c;代码的修改和保存都依赖于“vi”指令&#xff0c;而不得不承认vi指令的编辑界面非常原始&#xff0c;所以&#xff0c;如果可以将代码编辑放到更友好的环境里进行无疑是一件大快人心的事情。 本节介绍如何通过Visual Studio Code来进行远程连接: Vi…

[SpringCloud] Eureka 与 Ribbon 简介

目录 一、服务拆分 1、案例一&#xff1a;多端口微服务 2、案例二&#xff1a;服务远程调用 二、Eureka 1、Eureka 原理分析 2、Eureka 服务搭建&#xff08;注册 eureka 服务&#xff09; 3、Eureka 服务注册&#xff08;注册其他服务&#xff09; 4、Eureka 服务发现…

计算机视觉与深度学习 | 非线性优化理论:图优化、高斯牛顿法和列文伯格-马夸尔特算法

===================================================== github:https://github.com/MichaelBeechan CSDN:https://blog.csdn.net/u011344545 ===================================================== 计算机视觉与深度学习 | SLAM国内外研究现状 计算机视觉与深度学习 | 视…

Nginx负载均衡和备份和故障转移

如果你想要两台 Nginx 服务器配置访问同一个链接&#xff0c;通常意味着你可能想要以下几种配置&#xff1a; 负载均衡&#xff1a;两台 Nginx 服务器都工作&#xff0c;当访问者请求资源时&#xff0c;流量会在这两台服务器之间进行均衡分配。备份和故障转移&#xff1a;其中…

Flask 上传文件,requests通过接口上传文件

这是一个使用 Flask 框架实现文件上传功能的示例代码。该代码定义了两个路由&#xff1a; /upload&#xff1a;处理文件上传请求。在该路由中&#xff0c;我们首先从请求中获取上传的文件&#xff0c;然后将文件保存到本地磁盘上&#xff0c;并返回一个字符串表示上传成功。 /…

JavaScript中的模板直面量

模板直面量 const book {name: 你爱的书籍为};console.log(${book.name});//注意使用来输出name的属性值 我们可以省去function关键字&#xff0c;只用>来表示 let circle r > {const name 3.14;const area name * r * r;return area;}console.log(circle(2)); 还…

模仿企业微信界面

备注&#xff1a;未实现相关功能&#xff0c;仅模仿界面&#xff0c;不能作为商业用途&#xff0c;若有侵权&#xff0c;请联系删除。 <Window x:Class"模仿企业微信界面.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"…

xcode The document “...“ could not be saved

Today when I tried to save a file on my project I get an error message saying: The document “nameOfFile.m” could not be saved. I tried reinstalling xcode but no luck. The file can be edited with other editors and I see the same behavior on all my project…

【Python数据挖掘 基础篇】Python数据挖掘是个啥?

作者&#xff1a;Insist-- 个人主页&#xff1a;insist--个人主页 梦想从未散场&#xff0c;传奇永不落幕&#xff0c;博主会持续更新优质网络知识、Python知识、Linux知识以及各种小技巧&#xff0c;愿你我共同在CSDN进步 目录 一、了解数据挖掘 1. 数据挖掘是什么&#xff…

人工智能三要数之算法Transformer

1. 人工智能三要数之算法Transformer 人工智能的三个要素是算法、数据和计算资源。Transformer 模型作为一种机器学习算法&#xff0c;可以应用于人工智能系统中的数据处理和建模任务。 算法: Transformer 是一种基于自注意力机制的神经网络模型&#xff0c;用于处理序列数据的…

局域网内无法连接时间源?使用Chrony服务搭建时间源

1.安装chrony yum install -y chrony2.启动和设置配置文件 systemctl start chronyd3.设置为系统自动启动 systemctl enable chronyd以上服务器都需要安装 4.服务器192.168.1.63配置&#xff1a; 打开配置文件 /etc/chrony.conf 配置 allow 192.168.0.0/24 systemct…