常用css

背景颜色渐变

从左边开始的线性渐变。起点是红色,慢慢过渡到黄色

bash 复制代码
background-image: linear-gradient(to right, red , yellow);

从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到黄色

bash 复制代码
background-image: linear-gradient(to bottom right, red, yellow);

动态绑定背景图片

bash 复制代码
:style="{'backgroundImage': 'url(./../../static/bank/' + item.headBankCode + '_bgc.png)'}"

背景透明

bash 复制代码
background-color: transparent;
opacity:0;
background-color: rgba(0, 0, 0, 0);

图片地址添加随机字符串

bash 复制代码
<image :src="item.imgPath+'?'+new Date().getTime()" mode=""></image>

图片地址.png前面拼随机串

bash 复制代码
this.javaUploadInvoice.substring(0,this.javaUploadInvoice.length-4) + '?' + new Date().getTime() + this.javaUploadInvoice.substring(this.javaUploadInvoice.length-4)

使用CSS将多余文字显示成省略号

单行

bash 复制代码
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行

bash 复制代码
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
-webkit-line-clamp: 行数

vue中 :style 与 :class 三元运算符使用

style三元表达式:

bash 复制代码
<p :style="{'color': (checkIndex3==m.txt ? '#3d8cff':'#BBBBBB')}">{{m.txt}}</p>

class三元表达式:

bash 复制代码
<i class="iconfont " :class="[isShow=='password'?'icon-kejian':'icon-bukejian']"></i>

使用:class给同级div设计背景颜色

bash 复制代码
:class="{content1:index===0,content2:index===1,content3:index===2,content4:index!=0&&index!=1&&index!=2}"

content例子
.content1{
background-image: linear-gradient(to right, #f41414 , #f41414);
}
.content2{
background-image: linear-gradient(to right, #0766f1 , #07a4f1);
}
相关推荐
带娃的IT创业者16 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
非凡ghost17 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_110618 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白18 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学19 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽19 小时前
【初学】调试 MCP Server
前端·mcp
四月_h19 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate19 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
行者..................21 小时前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js
小爱同学_21 小时前
一次面试让我重新认识了 Cursor
前端·面试·程序员