01 《i》控制字体大小 v-for循环绑定类名 v-bind 结合三目运算 动态添加类

1==》控制字体图标的大小用 font-size:16px;
<i class="el-icon-arrow-left right-show-aside-icon"></i>

2==>自己写的卡片布局
shadow="never" 没有阴影 用了element-ui 2.4.11
<!-- 卡片 -->
<el-card class="box-card note-car-box" shadow="never">
<div class="note-car-header">
<div>卡片名称</div>
<i class="el-icon-more"></i>
</div>
<div class="note-car-content">
XXXXXXX文字……
</div>
</el-card>

3==》v-for循环 绑定类名 在添加一个类

class="show-icon-div" 无论如何都有的

<i class="iconfont" :class="itemIcon"></i>  第二个:class="itemIcon"是动态绑定的   在添加一个class

<div v-for="(itemIcon, index) in asideMenuIcon" :key="index" class="show-icon-div" @click="handlerMessage"><i class="iconfont" :class="itemIcon"></i></div>
//右侧菜单icon
asideMenuIcon:["iconshuaxin","iconshuaxin","iconshuaxin","iconshuaxin","iconshuaxin"]

4==》v-bind 结合三目运算 动态添加类

  <!--asideclickafter 是类名，无论怎样都会显示。    MenuConFlag 是否显示300区域  是变量 。

      newmenposition类名，小图重新定位。  

     rightmenu 是一个类名  rightmenu小图最初的定位。-->

 

    <div :class="['asideclickafter', MenuConFlag ? 'newmenposition' : 'rightmenu' ]" v-if="asideWidthFlag">   </div>