当前位置: 首页 > news >正文

在vue中:style 的几种使用方式

在日常开发中:style的使用也是比较常见的:

亲测有效

1.最通用的写法 

<p :style="{fontFamily:arr.conFontFamily,color:arr.conFontColor,backgroundColor:arr.conBgColor}">{{con.title}}</p>

2.三元表达式

<a :style="{height:(index==0?'89': ''),margin:(index == 0?'52px 37px':'')color:(index==0?arr.conFontColor:'#000')}" :href="con.subTitleHref" target="_self">{{con.subTitle}}</a>

3. 还可以以上两种方法结合起来

<p :style="{fontFamily:arr.conFontFamily,fontSize:(arr.conFontSize!=0.36?arr.conFontSize+arr.conFontUnit:''),color:arr.conFontColor,backgroundColor:arr.conBgColor}">{{con.title}}</p>

注意:这两种方式有个弊端,当需要把很多个样式添加到div上时,div看起来很臃肿

4.用计算属性

结合计算属性 将样式都提出来 最后形成一个变量 把这个变量添加到div上

这里要做的工作分几步:

  1. 通过计算属性把要放到一起的样式归整一下
  2. 针对默认值是空值或者特定值的样式 是不需要将这个样式放到div上的。
  3. 举例:如果div 已在css样式里设置了font-size 是16px,那么div行内样式 就不要存在font-size:16px 这种重复没有意义 就要做判断去除

    这里想到的办法是:

    用一个变量存入16 这里是conFontSize,如果conFontSize值等于16 那么就让font-size:''为空 然后通过循环style 将为空的font-size 去掉。

    如果不等于16 就是修改的,就要正常显示

  4. 将:style="arr.styles.conTitleStyle"添加到div上

代码如下:

html

<p :style="arr.styles.conTitleStyle">{{con.title}}</p>

js

data(){return {arr:{styles:{//存放的是 动态修改的样式conTitleStyle:{},// 内容标题总样式conLiStyle:{},//内容li总样式},pieceStyle:{conFontFamily:"",conFontSize:16,conFontColor:"",conBgColor:"",conLineHeight:21,// Writing 专用conLRCenter:"",// 对齐方式 conTopRow:0,//首行缩进 conLetterSpace:0,//字体间隔 conFontBold:"",//加粗 conSpace:""//文字是否省略 }}}
},
computed:{diyConTitleStyle:function(){var pieceD = this.arr.pieceStyle;var fontSizeNum;// 判断对应模块fontSize的默认值 (默认值设置的和css fontsize一样) 如果等于就让这一项的css 为空 不等于就走conFontSize if(this.arr.mtype=='Imglist'){fontSizeNum=(pieceD.conFontSize!=12)}else if(this.arr.mtype=='ImglistScroll'||this.arr.mtype=='NewsList2'){fontSizeNum=(pieceD.conFontSize!=17)}else if(this.arr.mtype=='NavList'){fontSizeNum=(pieceD.conFontSize!=18)}else if(this.arr.mtype=='NavDock'){fontSizeNum=(pieceD.conFontSize!=14)}else if(this.arr.mtype=='NewsList2'){fontSizeNum=(pieceD.conFontSize!=15)}else{fontSizeNum=(pieceD.conFontSize!=16)}// 判断对应模块lineheight的默认值     if(this.arr.mtype=='NewsList'){var lhnum=(pieceD.conLineHeight!=16)}else if(this.arr.mtype=='Writing'){var lhnum=(pieceD.conLineHeight!=21)}//console.log(lhnum)var dt={"color":pieceD.conFontColor,"font-family":pieceD.conFontFamily,                  "font-size":fontSizeNum?pieceD.conFontSize+"px":"","background-color":pieceD.conBgColor,"line-height":(lhnum?pieceD.conLineHeight+'px':''),"text-align":pieceD.conLRCenter,"text-indent":(pieceD.conTopRow!=0?pieceD.conTopRow+'px':''),"letter-spacing":(pieceD.conLetterSpace!=0?pieceD.conLetterSpace+'px':''),"font-weight":pieceD.conFontBold,"white-space":pieceD.conSpace}//过滤掉即删除掉空值的参数和数值for (var i in dt) {dt[i]==""?delete(dt[i]):1}return dt}
},
watch:{arr:{handler(newValue, oldValue) {// 监听是为了把更改后的样式及时保存到arr.styles里,最后arr是要提交的this.arr=newValue;this.arr.styles.conTitleStyle=this.diyConTitleStyle;this.arr.styles.conLiStyle=this.diyConLiStyle;}deep: true}
}

最后成果 当font-size是16px时:

当font-size 不是16px时  行内样式出现font-size了

5.在:style放两个class样式怎么放

用&& 连接

<p :style="arr.styles.conTitleStyle&&arr.styles.conLiStyle">{{con.title}}</p>  错误

发现只有后面的那个生效。

我希望两个都生效 所以得用数组:正确

<p :style="[arr.styles.conTitleStyle,arr.styles.conLiStyle]">{{con.title}}</p>

相关文章:

在vue中:style 的几种使用方式

在日常开发中:style的使用也是比较常见的&#xff1a; 亲测有效 1.最通用的写法 <p :style"{fontFamily:arr.conFontFamily,color:arr.conFontColor,backgroundColor:arr.conBgColor}">{{con.title}}</p> 2.三元表达式 <a :style"{height:…...

商城小程序后端开发实践中出现的问题及其解决方法

前言 商城小程序后端开发中&#xff0c;开发者可能会面临多种问题。以下是一些常见的问题及其解决方法&#xff1a; 一、性能优化 问题&#xff1a;随着用户量的增加和功能的扩展&#xff0c;商城小程序可能会出现响应速度慢、处理效率低的问题。 解决方法&#xff1a; 对数…...

阿里Arthas-Java诊断工具,基本操作和命令使用

Arthas 是阿里巴巴开源的一款Java诊断工具&#xff0c;深受开发者喜爱。它可以帮助开发者在不需要修改代码的情况下&#xff0c;对运行中的Java程序进行问题诊断和性能分析。 软件具体使用方法 1 启动 Arthas&#xff0c;此时可能会出现好几个jvm的进程号&#xff0c;输入序号…...

Go 1.19.4 路径和目录-Day 15

1. 路径介绍 存储设备保存着数据&#xff0c;但是得有一种方便的模式让用户可以定位资源位置&#xff0c;操作系统采用一种路径字符 串的表达方式&#xff0c;这是一棵倒置的层级目录树&#xff0c;从根开始。 相对路径&#xff1a;不是以根目录开始的路径&#xff0c;例如 a/b…...

jEasyUI 创建标签页

jEasyUI 创建标签页 jEasyUI&#xff08;jQuery EasyUI&#xff09;是一个基于jQuery的框架&#xff0c;它为Web应用程序提供了丰富的用户界面组件。标签页&#xff08;Tabs&#xff09;是jEasyUI中的一个常用组件&#xff0c;用于在一个页面内组织多个面板&#xff0c;用户可…...

鸿蒙HarmonyOS开发:一次开发,多端部署(界面级)天气应用案例

文章目录 一、布局简介二、典型布局场景三、侧边栏 SideBarContainer1、子组件2、属性3、事件 四、案例 天气应用1、UX设计2、实现分析3、主页整体实现4、具体代码 五、运行效果 一、布局简介 布局可以分为自适应布局和响应式布局&#xff0c;二者的介绍如下表所示。 名称简介…...

使用 Python 模拟光的折射,反射,和全反射

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

大厂太卷了!又一款国产AI视频工具上线了,免费无限使用!(附提示词宝典)

大家好&#xff0c;我是程序员X小鹿&#xff0c;前互联网大厂程序员&#xff0c;自由职业2年&#xff0c;也一名 AIGC 爱好者&#xff0c;持续分享更多前沿的「AI 工具」和「AI副业玩法」&#xff0c;欢迎一起交流~ 记得去年刚开始分享 AI 视频工具的时候&#xff0c;介绍的大多…...

vue3扩展echart封装为组件库-快速复用

ECharts ECharts&#xff0c;全称Enterprise Charts&#xff0c;是一款由百度团队开发并开源&#xff0c;后捐赠给Apache基金会的纯JavaScript图表库。它提供了直观、生动、可交互、可个性化定制的数据可视化图表&#xff0c;广泛应用于数据分析、商业智能、网页开发等领域。以…...

随机掉落的项目足迹:Vue3 + wangEditor5富文本编辑器——toolbar.getConfig() 查看工具栏的默认配置

问题引入 小提示&#xff1a;问题引入是一个讲故事的废话环节&#xff0c;各位小伙伴可以直接跳到第二大点&#xff1a;问题解决 我的项目不需要在富文本编辑器中引入添加代码块的功能&#xff0c;于是我寻思在工具栏上把操作代码的菜单删一删 于是我来到官网文档工具栏配置 …...

更新 Git 软件

更新 Git 软件本身是指将你当前安装的 Git 版本升级到最新版本。不同的操作系统有不同的更新方法。以下是针对 Windows、macOS 和 Linux 的 Git 更新步骤&#xff1a; Windows 检查当前版本&#xff1a; git --version访问官网下载最新版本&#xff1a; 访问 Git 官方网站 (ht…...

Keil根据map文件确定单片机代码存储占用flash情况

可以从map文件中查看得知&#xff0c;代码占用内存情况大概为35KB,而在在线仿真时&#xff0c;可以看到在flash的0x8008F64地址前均有数据&#xff0c;是代码数据&#xff0c;8F64(HEX)36708(DEC),36708/102335,刚好35。因此&#xff0c;要想操作读写flash&#xff0c;必须在不…...

ByteTrack多目标跟踪流程图

ByteTrack多目标跟踪流程图 点个赞吧&#xff0c;谢谢。...

什么是L2范数

定义&#xff1a; 在数学和计算中&#xff0c;L2 范数是一种用于测量向量长度或大小的方法&#xff0c;也被称为欧几里得范数。对于一个 n 维向量 x ( x 1 , x 2 , … , x n ) \mathbf{x} (x_1, x_2, \dots, x_n) x(x1​,x2​,…,xn​)&#xff0c;其 L2 范数定义为&#x…...

Scrapy爬虫IP代理池:提升爬取效率与稳定性

在互联网时代&#xff0c;数据就是新的黄金。无论是企业还是个人&#xff0c;数据的获取和分析能力都显得尤为重要。而在众多数据获取手段中&#xff0c;使用爬虫技术无疑是一种高效且广泛应用的方法。然而&#xff0c;爬虫在实际操作中常常会遇到IP被封禁的问题。为了解决这个…...

信息技术(IT)行业的发展

近年来&#xff0c;信息技术&#xff08;IT&#xff09;行业的发展呈现出前所未有的活力和潜力。随着全球数字化转型的加速&#xff0c;IT行业正逐步成为推动社会经济发展的重要引擎。无论是互联网、大数据、人工智能&#xff0c;还是云计算、物联网&#xff0c;这些新兴技术都…...

C++primer第十一章使用类(矢量随机游走实例)

操作符重载 操作符重载(operator overoading)是一种形式的 C多态。 第8章介绍了C是如何使用户能够定义多个名称相同但特征标(参数列表)不同的函数的。这被称为函数重载(function overloading)或函数多态(functional polymorphism)&#xff0c;旨在让您能够用同名的函数来完成…...

服务器为什么会受到网络攻击?

随着科技的 快速发展&#xff0c;企业也开展了越来越多的线上业务&#xff0c;但同时也遭受到各种各样的网络攻击&#xff0c;那服务器为什么会受到网络攻击呢&#xff1f;下面就让小编带领大家一起来了解一下吧&#xff01; 首先企业中服务器被攻击的原因有很多&#xff0c;主…...

IDA Pro基本使用

IDA Pro基本使用 1.DllMain的地址是什么? 打开默认在的位置1000D02E就是DllMain地址 按空格键可以看到图形化界面选择options、general勾选对应的选项在图像化也能看到 2.使用Imports 窗口并浏览到 gethostbyname&#xff0c;导入函数定位到什么地址? 这里可以打开Impo…...

Day.js时间插件的安装引用与常用方法大全

&#x1f680; 个人简介&#xff1a;某大型国企资深软件研发工程师&#xff0c;信息系统项目管理师、CSDN优质创作者、阿里云专家博主&#xff0c;华为云云享专家&#xff0c;分享前端后端相关技术与工作常见问题~ &#x1f49f; 作 者&#xff1a;码喽的自我修养&#x1f9…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

nnUNet V2修改网络——暴力替换网络为UNet++

更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...

聚六亚甲基单胍盐酸盐市场深度解析:现状、挑战与机遇

根据 QYResearch 发布的市场报告显示&#xff0c;全球市场规模预计在 2031 年达到 9848 万美元&#xff0c;2025 - 2031 年期间年复合增长率&#xff08;CAGR&#xff09;为 3.7%。在竞争格局上&#xff0c;市场集中度较高&#xff0c;2024 年全球前十强厂商占据约 74.0% 的市场…...

如何把工业通信协议转换成http websocket

1.现状 工业通信协议多数工作在边缘设备上&#xff0c;比如&#xff1a;PLC、IOT盒子等。上层业务系统需要根据不同的工业协议做对应开发&#xff0c;当设备上用的是modbus从站时&#xff0c;采集设备数据需要开发modbus主站&#xff1b;当设备上用的是西门子PN协议时&#xf…...