有checkBox复选框需求时，我们所用的框架样式不符合，所以需要自己写 对勾样式，当然用图片也OK。
效果图：
html:
<div class="msg-position c-bg-wt"><p>推送岗位<i class="c-rd">*</i> <i class="icon-span" :class="{'icon-span-select' : chkAllStatus, 'brand-btn': chkAllStatus, 'brand-b': chkAllStatus}" @click="chkAll"></i>全部</p><div v-for="item in positions" class="msg-position-div hidden"><p style="white-space: nowrap;overflow:hidden;text-overflow: ellipsis;"><i @click="chkPosition(item)" class="icon-span" :class="{'icon-span-select' : item.isActive, 'brand-btn': item.isActive, 'brand-b': item.isActive}"></i>{{item.positionName}}</p></div></div>
CSS：
//对号样式.icon-span{display: inline-block;background-color: #fff;border-radius: 4px;border: 2px solid #7f7f7f;position: relative;width: 18px;height: 18px;vertical-align: middle;}.icon-span::after{border: 2px solid transparent;border-left: 0;border-top: 0;content: " ";top: 2px;left: 5px;position: absolute;width: 4px;height: 8px;-webkit-transform: rotate(45deg) scale(0);transform: rotate(45deg) scale(0);-webkit-transition: -webkit-transform .2s;transition: -webkit-transform .2s;transition: transform .2s;transition: transform .2s, -webkit-transform .2s;}.icon-span-select{}.icon-span-select::after{border-color: #fff;-webkit-transform: rotate(45deg) scale(1);transform: rotate(45deg) scale(1);}
后记
也写了vue的全选全不选功能，有需要请移步《VUEJS-全选&全不选》
