实现背景一半白一半蓝并且颜色占比使用动态css

实现背景一半白一半蓝

效果如下：

代码如下：

知识点linear-gradient第一个参数：方向（可以为角度） 第二至多个参数：颜色 占比（可有可无） 至下一个参数颜色渐变

<template>
  <div>
    <div class="circle"></div>
  </div>
</template>
​
<style scoped lang="less">
.circle{
  width: 10px;
  height: 60px;
  margin: 100px 0 0 100px;
  background:linear-gradient(to bottom,#5771D7 0%, #5771D7 50%, white 50%, white 100%);
  border: 2px solid #5771D7;
  border-radius: 8px;
}
</style>
​

实现颜色占比使用动态数据

要实现的是CSS linear-gradient() 函数中，颜色渐变终止处的百分比使用的是data中的动态数据。

首先，需要计算出动态数据占比，并且存入data中，代码如下：

data(){
    return(){
        projectArray:[{first:1，second:10},{first:2，second:10}，{first:3，second:10}]
    }
},
created(){
    this.changeBgData()
},
methods:{
    changeBgData(){
        for(let i=0;i<this.projectArray.length;i++){
            this.projectArray[i].bgData = 100-((this.projectArray[i].first/this.projectArray[i].second)*100).toFixed(0)+"%"
        }
    }
}

因为想让蓝色的在下面所以用的100-剩下的,使用this.projectArray[i].bgData =...直接就在projectArray[i]中加了字段bgData

然后，渲染到css上,效果是下面是蓝色的，然后表示first占second的百分比

<template>
  <div v-for="(item,index) in projectArray" :key="index">
    <div class="circle" :style="{'--percentage' : item.bgData}"></div>
  </div>
</template>
​
<style scoped lang="less">
.circle{
  width: 10px;
  height: 60px;
  margin: 100px 0 0 100px;
  background:linear-gradient(to bottom,#5771D7 var(--percentage), white var(--percentage), white 100%);
  border: 2px solid #5771D7;
  border-radius: 8px;
}
</style>

文章：CSS linear-gradient 实现背景双色或多色，背景一半变色_小小前端--可笑可笑的博客-优快云博客_linear-gradient各一半