<span
   v-for="tag in visitedViews"
   :key="tag.path"
    class="tags-view-item" //默認(rèn)樣式
    :style="spanStyle" // 根據(jù)css中使用變量的方法,結(jié)合vue中動態(tài)行內(nèi)樣式進(jìn)行偽元素動態(tài)屬性設(shè)置
    :class="isActive(tag) ? 'active' : ''"
 >
   {{ tag.title }}
</span>

export default {
  data() {
    return {
      spanStyle: {
        "--color": this.$store.state.settings.theme //默認(rèn)值
      }
  };
  watch: {
  	//偵聽store里某個屬性的變化
    "$store.state.settings.theme": function(val) {
      this.spanStyle["--color"] = val;
  },
},
<style>
    .tags-view-item {
     //...
      &.active {
        background-color: var(--color);
        color: #fff;
        border-color: var(--color);
        &::before {
        }
      }
    }
  }
</style>

<span class="btn" 
	  @click="jumCZ"
	  :style="randomColor"http://根據(jù)css中使用變量的方法,結(jié)合vue中動態(tài)行內(nèi)樣式進(jìn)行偽元素動態(tài)屬性設(shè)置
>
		充值
</span>
export default {
  data() {
    return {
      randomColor: {
        "--color": "#1a73e8" // 默認(rèn)值
      }
    };
  },
  watch: {
   //偵聽store里的settings模塊下的state里的 theme 發(fā)生變化 產(chǎn)出隨機(jī)顏色
    "$store.state.settings.theme": function(val) {
      const randomColor = Math.floor(Math.random() * 16777215).toString(16);
      this.randomColor["--color"] = "#" + randomColor;
    }
  },
}

<style>
    .btn {
      width: 70px;
      height: 20px;
      background-image: linear-gradient(
        to right,
        var(--color) 0%, //使用data中的變量
        #79cbca 51%,
        #77a1d3 100%
      );
      text-align: center;
      text-transform: uppercase;
      transition: 0.5s;
      background-size: 200% auto;
      color: white;
      border-radius: 10px;
      display: block;
      cursor: pointer;
      font-size: 14px;
      line-height: 18px;
    }
    .btn:hover {
      background-position: right center; 
      color: #fff;
      text-decoration: none;
    }
</style>