Awesomehhhhhh-CSDN博客

原创 style属性加方法判断返回动态样式

需求，根据文字长度，返回所需的font-size 超过6字符使用font-size14px；超过4字符小于6字符使用font-size16px，小于四字符使用font-size22px

2021-06-17 14:40:15 1919

转载按钮勾选效果

效果：未选中已选中<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> /* 外框 */ #outSide { position: relative; width: 153px; height: 53px; border: 2px solid #df599

2021-05-11 11:03:11 220

实现效果，当item为0时，字体颜色显示蓝色，否则显示橙色1.v-if-v-else/v-show的方式，只显示其中之一#v-if v-else<divclass="blue"v-if="item.num=='0'">{{item.num}}</div><divclass="orange"v-else>{{item.num}}</div>#v-show<divclass="blue"v-show="it...

2021-04-28 18:17:51 5103

原创 vue去掉循环数组中的最后一组的某个样式style/class

class处理实现效果：最后一个循环数组去掉border（实际是增加一个"border:none"样式覆盖原本设定border: 1 solid red的样式）<div v-for="(item, index) in arr" :key="`a${index}`"> <div class="item" :class="{ 'myStyle': index === arr.length - 1 }"> {{ item }} </div></

2021-04-28 18:04:02 2568

原创固定在右下角的div盒子

效果：html：<div class="box"> <div>测试：如果字符长度超过10，则会显示省略号ooooooo</div> <div class="date">2020年1月24日</div> </div>css：<style> .box { width: 400px; height: 56px; position: absolute;

2021-04-23 18:13:23 809

转载 js中字符串固定个数，超出加省略号...

效果：html：<div id="myId"></div> js:<script> let str = '测试：如果字符长度超过10，则会显示省略号'; if(str.length > 10) { //如果字符长度超过10，后面的字符就变成...可自行调整长度和代替字符 str = str.substr(0,10) + "..." //截取从第一个字符开始，往后取10个字符，剩余的用...代替

2021-04-23 18:03:15 785

原创 css径向渐变radial-gradient设置左右内凹圆形

css径向渐变radial-gradient设置左右内凹圆形先看看效果，这个样式多用于优惠券，需求是能够根据内容宽高自适应大小的divCSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向径向渐变（Radial Gradients）- 由它们的中心定义css.box { width:auto; ...

2021-03-29 16:56:25 1385

weixin_41949878的博客