vue css 变量

CSS 变量 的方法：

1、 使用 computed：

<view class="detail" :style="dynamicStyle" @click="showDetailBtn">商品详情</view>

computed: {
            ...mapState(['token', 'userinfo', 'cartGoods','merchantId']),
            dynamicStyle() {
                return {
                    color: this.showDetail ? 'green' : 'gray',
                    fontSize: this.showDetail ? '32upx' : '28upx'
                };
            }
},

2、 使用   :class="{ Colors: ee }"

 

           <li :class="{ Colors: ww }" style="cursor: pointer" @click="ProductNavigationClick(1)">
            <span style="cursor: pointer">产品搜索</span>
          </li>
          <li :class="{ Colors: ee }" style="cursor: pointer" @click="ProductNavigationClick(2)">
            <span style="cursor: pointer">品牌展示</span>
          </li>

　　

ProductNavigationClick(id) {
      // console.log('asd')
      this.navId = id;
      this.$store.commit("user/setNavData", id);
      // console.log(id)
      if (id === 1) {

        this.ww = true;
        this.ee = false;
    
        this.$router.push("/ProductNavigation");
      }

.Colors {
  color: #7cab62;
}