Css中該如何使用Vue的變量

更新時(shí)間：2023年11月09日 09:49:46 作者：A-sleep

在我們使用Vue開發(fā)時(shí),經(jīng)常會(huì)用到CSS,下面這篇文章主要給大家介紹了關(guān)于Css中該如何使用Vue變量的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

應(yīng)用場景:(Vue一鍵換膚 – 修改 tagsView 動(dòng)態(tài)選中樣式)

1.css中如何用變量

聲明css變量的時(shí)候，變量名前面要加兩根連詞線（–）。

變量名大小寫敏感，–header-color和–Header-Color是兩個(gè)不同變量。

var()函數(shù)用于讀取變量。

var()函數(shù)還可以使用第二個(gè)參數(shù)，表示變量的默認(rèn)值。如果該變量不存在，就會(huì)使用這個(gè)默認(rèn)值。

第二個(gè)參數(shù)不處理內(nèi)部的逗號或空格，都視作參數(shù)的一部分。

<span
   v-for="tag in visitedViews"
   :key="tag.path"
    class="tags-view-item" //默認(rèn)樣式
    :style="spanStyle" // 根據(jù)css中使用變量的方法,結(jié)合vue中動(dòng)態(tài)行內(nèi)樣式進(jìn)行偽元素動(dòng)態(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里某個(gè)屬性的變化
    "$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中動(dòng)態(tài)行內(nèi)樣式進(jìn)行偽元素動(dòng)態(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>

總結(jié)

到此這篇關(guān)于Css中該如何使用Vue的變量的文章就介紹到這了,更多相關(guān)Css使用Vue變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: