Vue Css 页面样式变灰色调

这里分两种情况展示：

1、单纯的Css变灰。

2、根据后端传来的数据(normal / gray)，从而判断是正常显示 or 变灰显示。

第一种情况：单纯的CSS变灰（兼容写法）

.gray{
  -webkit-filter: grayscale(100%); /* webkit */
  -moz-filter: grayscale(100%); /*firefox*/
  -ms-filter: grayscale(100%); /*ie9*/
  -o-filter: grayscale(100%); /* opera */
  filter: grayscale(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
  filter:gray; /*ie9- */
}

---

 第二种情况：根据后端动态判断主题颜色（正常色调or灰色调）

html

<div :class="this.infoList.value"></div>

css

.normal{
  padding: 0;
  margin: 0;
}
.gray{
  -webkit-filter: grayscale(100%); /* webkit */
  -moz-filter: grayscale(100%); /*firefox*/
  -ms-filter: grayscale(100%); /*ie9*/
  -o-filter: grayscale(100%); /* opera */
  filter: grayscale(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
  filter:gray; /*ie9- */
}

js 

  data(){
    return{
     // 存放后端的值
     infoList: [],
    }
  },
  created(){
    this.getList();
  },
  methods: {
    getList(){
      // themeColor后端接口API
      themeColor().then((response)=>{
        // 获取后端响应的值
        this.infoList = response.data
      })   
    },
  }