使用饿了吗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" >

< i class= "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

}

}