使用饿了吗switch改变状态，改变图标的状态

先不说，先上效果图

使用饿了吗组件里面的switch组件，实现类型分组的打开与关闭，同时，实现旁边的字出现颜色深浅的变化。

这里进行切换的时候，恰好使用到了组件切换的条件，这里直接上代码。

<div :class="$style.favTitlebutton">

<el-switch @change="handleChange"

v-model="leiXingFenZu"

on-text="打开"

off-text="关闭"></el-switch>

<div :class="[leiXingFenZu ?$style.TitleTypeFont :$style.favFontNew]">类型分组</div>

</div>

这里的类型分组就是布尔值的选值，通过这个选取字体的开关颜色，不用触及到JS的魅力。

另外改变图标的状态，还有另外一种方法，就是使用toggle

上代码，这里改变的是图标的状态。

<div class="starSelect">

<iclass="el-icon-star-on" :class="{star: row.starSelect }" @click.stop="collectStar"></i>

<a>{{row.planName }}</a></div>

函数部分：

collectStar(e) {

// 收藏按钮函数

return e.target.classList.toggle('star')

},

CSS部分

.el-icon-star-on {

color: #999;

&.star {

color: #FF9900

}

}