css:如何通过不同的值,改变盒子的样式和字体颜色通过computed而不是v-if

在使用uniapp编写功能时,可以通过computed方法来实现根据num这个值也可以是后端传过来的值只要是number类型都可以。不同取值来修改盒子的背景颜色和字体颜色。首先,在data中定义一个num来存储当前的值,然后在computed中创建一个样式对象,并根据num的取值来设置相应的背景颜色和字体颜色。

<template><view><view class="box" :style="boxStyle">{{ num }}</view></view>
</template><script>
export default {data() {return {num: 1 // 默认值为1};},computed: {boxStyle() {let backgroundColor = "";let color = "";// 根据num的取值来设置样式switch (this.num) {case 1:backgroundColor = "red";color = "lightcoral";break;case 2:backgroundColor = "blue";color = "lightblue";break;case 3:backgroundColor = "green";color = "lightgreen";break;default:break;}// 返回样式对象return {backgroundColor,color};}}
};
</script><style>
.box {width: 100px;height: 100px;display: flex;justify-content: center;align-items: center;font-size: 20px;
}
</style>

我们在template中设置了一个名为box的view来作为盒子容器,通过:style绑定boxStyle来设置盒子的样式。在computed中,我们创建了一个boxStyle方法,根据num的不同取值来设置backgroundColor和color的值,并将它们作为样式对象返回。最后,在style中设置box的样式,如宽度、高度、居中等。

这样,当num的值改变时,盒子的背景颜色和字体颜色就会随之变化。就不需要使用v-if设置多个盒子和多个样式。

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

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

相关文章

如何在 uniapp 里面使用 pinia 数据持久化 (pinia-plugin-persistedstate)

想要在 uniapp 里面使用 pinia-plugin-persistedstate 会遇到的问题就是 uniapp里面没有浏览器里面的 sessionStorage localStorage 这些 api。 我们只需要替换掉 pinia-plugin-persistedstate 默认的储存 api 就可以了。使用 createPersistedState 重新创建一个实例, 把里面的…

Windows server服务器允许多用户远程的设置

在Windows Server上允许多用户同时进行远程桌面连接&#xff0c;您需要配置远程桌面服务以支持多用户并确保许可证和授权允许多用户连接。以下是在Windows Server上允许多用户远程桌面连接的步骤&#xff1a; 注意&#xff1a;这些步骤适用于 Windows Server 2012、Windows Ser…

开源B2B网站电子商务平台源码下载搭建 实现高效交易的桥梁

随着互联网的普及和电子商务的快速发展&#xff0c;B2B&#xff08;Business-to-Business&#xff09;网站电子商务平台在商业领域中发挥着越来越重要的作用。通过开源B2B网站电子商务平台源码搭建&#xff0c;企业可以构建自己的电子商务平台&#xff0c;实现高效交易的桥梁。…

Oracle修改带数据的字段类型

insert into TNW_FUND_SELORG(TFDINFOID,TSOINFOID) select TFD_INFO_ID,TSO_INFO_ID from TFD_SEL_FUNDLINK_TO_OLDFUNDWEB_DB /*修改原字段名*/ ALTER TABLE 表名 RENAME COLUMN 字段名 TO 字段名1; /*添加一个和原字段同名的字段*/ ALTER TABLE 表名 ADD 字段名 VARCHAR…

轻量级 IDE 文本编辑器 Geany 发布 2.0

Geany 是功能强大、稳定、轻量的开发者专用文本编辑器&#xff0c;支持 Linux、Windows 和 macOS&#xff0c;内置支持 50 多种编程语言。 2005 年Geany 发布首个版本 0.1。上周四刚好是 Geany 诞生 18 周年纪念日&#xff0c;官方发布了 2.0 正式版以表庆祝。 下载地址&#…

骨传导耳机优缺点是什么,这几点骨感耳机的利与弊一定得知道!

随着近几年骨感耳机的风头逐渐兴起&#xff0c;骨感耳机受到了不少人的关注&#xff0c;并且存在很多人对于骨感耳机的利与弊还存在着一定的盲点&#xff0c;下面让我来给大家讲解一下。 骨感耳机的利&#xff1a; 1、不入耳的设计对耳道的损伤更小 骨感耳机采用一种独特的声…

好用工具分享 | tmux 终端会话分离工具

目录 1 tmux的安装 2 tmux的基本操作 2.1 启动与退出 2.2 分离会话 2.3 查看会话 2.4 重接会话 2.5 杀死会话 2.6 切换会话 tmux是一个 terminal multiplexer&#xff08;终端复用器&#xff09;&#xff0c;它可以启动一系列终端会话。 我们使用命令行时&#xff0c;…

vscode免密码认证ssh连接virtual box虚拟机

文章目录 安装软件virtual box配置vscode配置创建并传递密钥连接虚拟机最后 安装软件 安装vscode和virtual box&#xff0c;直接官网下载对应软件包&#xff0c;下载之后&#xff0c;点击执行&#xff0c;最后傻瓜式下一步安装即可 virtual box配置 创建一个仅主机网络的网卡 …

听GPT 讲Rust源代码--library/std(7)

题图来自 Programming languages: How Google is using Rust to reduce memory safety vulnerabilities in Android[1] File: rust/library/std/src/sys/unix/kernel_copy.rs 在Rust的标准库中&#xff0c;kernel_copy.rs文件位于sys/unix目录下&#xff0c;其主要作用是实现特…

Aware接口回调的作用及其意义

Aware接口回调的作用是让Bean获取Spring容器的一些资源或上下文信息&#xff0c;从而更方便地访问其他Bean或资源。 Aware接口包括以下几种&#xff1a; ApplicationContextAware&#xff1a;实现该接口的Bean可以获取到Spring容器的ApplicationContext对象&#xff0c;从而可以…

github搜索技巧探索

毕设涉及到推荐系统&#xff0c;那么就用搜索推荐系统相关资料来探索一下GitHub的搜搜技巧 文章目录 1. 基础搜索2. 限定在特定仓库搜索3. 按照语言搜索4. 按照star数量搜索5. 搜索特定用户/组织的仓库6. 查找特定文件或路径7. 按时间搜索8. 搜索不包含某个词的仓库9. 搜索特定…

stream流—关于Collectors.toMap使用详解

目录 使用规则&#xff1a;1.将list转成以id为key的map&#xff0c;value是id对应的某对象2.假如id存在重复值&#xff0c;则会报错Duplicate key xxx3.想获得一个id和name对应的Map<String, String>3.1 name为空时null3.2 id重复时 4.分组 使用groupingby 使用规则&…

Visual Studio 2019部署桌面exe(笔记)

一、使用Visual Studio自带的Publish功能 上述两张图片一般会自动加载&#xff0c;只需要查看一下即可。 签名问题&#xff1a; 生成exe执行文件 双击setup.exe 桌面生成&#xff08;默认图标&#xff09; 换图标&#xff1a; 对应桌面生成的exe

Redis快速上手篇七(集群-六台虚拟机)

Redis集群 主从复制的场景无法吗满足主机单点故障时需要引入集群配置 一般数据库要处理的读请求远大于写请求 &#xff0c;针对这种情况&#xff0c;我们优化数据库可以采用读写分离的策略。我们可以部 署一台主服务器主要用来处理写请求&#xff0c;部署多台从服务器 &#…

BEVFusion论文与模型代码分享

BEVFusion有两篇撞名的文章: 一篇是:BEVFusion: Multi-Task Multi-Sensor Fusion with Unified Bird’s-Eye View Representation Zhijian 论文:https://arxiv.org/pdf/2205.13790.pdf 代码:https://github.com/mit-han-lab/bevfusion 另外一篇是:BEVFusion:A Simple …

pycharm 2023.2.3设置conda虚拟环境

分两步&#xff1a; &#xff08;1&#xff09;设置Virtualenv Environment &#xff08;2&#xff09;设值Conda Executable 加载conda环境&#xff0c;然后选择conda环境

异步 AIMD 收敛

给出的一直都是同步 AIMD 收敛&#xff0c;所以简单&#xff0c;但不至于 bbr 单流情形退化成简陋。 给出一个异步 AIMD 收敛过程是必要的&#xff0c;可见&#xff0c;它同样是简洁优美的&#xff1a; 虽然我没有标注太多&#xff0c;它始终没有成为一团乱麻。 和同步 AIM…

1-径向基(RBF)神经网络PID控制器仿真

1、内容简介 略 1-可以交流、咨询、答疑 2、内容说明 略 3、仿真分析 4、参考论文 略 5、下载链接 链接&#xff1a;https://pan.baidu.com/s/1mNySkJC4voazGMLEEfIjDw 提取码&#xff1a;2exo

localhost知识

文章目录 一、localhost是什么&#xff1f;二、localhost 在平时用到的地方三、 localhost 与 127.0.01 一、localhost是什么&#xff1f; localhost 是一个特殊的主机名&#xff0c;通常指代本机。它被用来进行本地开发和测试&#xff0c;也常被用作网络配置中的占位符&#…

spring-代理模式

代理模式 一、概念1.静态代理2.动态代理 一、概念 ①介绍 二十三种设计模式中的一种&#xff0c;属于结构型模式。它的作用就是通过提供一个代理类&#xff0c;让我们在调用目标 方法的时候&#xff0c;不再是直接对目标方法进行调用&#xff0c;而是通过代理类间接调用。让不…