Vue动态类的几种使用方法总结.docxVIP

第

Vue动态类的几种使用方法总结

目录Vue动态类的几种使用点击显示或隐藏样式的做法利用三元表达式切换样式多个动态类的用法Vueclass动态类名总结

Vue动态类的几种使用

动态类的操作比较简单，但是很实用。

点击显示或隐藏样式的做法

利用带数据绑定

button@click=isShow=!isShow点击/button

div:哈哈哈/div

data(){

?return{

?isShow:true

}

.colorRed{

???color:red;

.colorBlue{

???color:blue;

}

代码含义：当isShow为true时，添加类名colorRed，div字体为红色，渲染结果如下：

div哈哈哈/div

利用三元表达式切换样式

控制isShow切换样式

div:class=[isShowcolorRed:colorBlue]哈哈哈/div

多个动态类的用法

案例：用带有图标的按钮展开列表和收起列表

i:class={el-icon-d-arrow-left:!menuIsShow,el-icon-d-arrow-right:menuIsShow}

@click=me