template 向style中传参

注意点：

1. 在标签节点必须使用--开头命名变量名。如--width / --color
2. 在标签节点A 自定义了css的变量名，必须在当前节点A的style中使用css变量
3. var函数中不可在进行变量操作。 如 var(--color + '32')，这样不生效

<template>
  <ul>
    <li v-for="item in list" :key="item.id">
      <div class="label" :style="{'--width':item.progress ? item.progress + '%' : '0%','--color':item.progress > 60 ? '#5cbb7a' : '#f56c6c'  }"  >{{item.label}}</div>
    </li>
  </ul>
</template>

<script>
export default {
  name: "AfterCss",
  components: {},
  props: { 
  },
  data() {
    return {
      list:[
        {id:1,label:'不怕天明，我想只是害怕清醒',progress:'20'},
        {id:2,label:'不怕天明，我想只是害怕清醒',progress:'30'},
        {id:3,label:'不怕天明，我想只是害怕清醒',progress:'0'},
        {id:4,label:'不怕天明，我想只是害怕清醒',progress:'70'},
        {id:5,label:'不怕天明，我想只是害怕清醒',progress:'100'},
      ]
    };
  },
  methods: { 
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
ul {
  padding: 0;
  margin: 0; 
  li{
    list-style: none;
    line-height: 30px;
  }
  .label{
    position: relative;
    height: 100%;
  }
  .label::after{
    content:'';
    display: inline-block;
    height: 3px;
    width: var(--width);
    border-radius: 3px;
    position: absolute;
    left:0; 
    bottom:-5px;
    background-color: var(--color);
  }
}
</style>