vue,动态样式

最新推荐文章于 2024-08-05 11:04:19 发布

麦麦6677

最新推荐文章于 2024-08-05 11:04:19 发布

阅读量44

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/csdnuser716/article/details/131066350

版权

背景需求

el-tree中，需要根据不同类型的节点要使用不同的class展示

       .ntype1{
            color:#1670b1;
            font-weight: 600;
            font-size: 17px;
        }

        .ntype2{
            color:#1c7cc1;
            font-weight: 400;
            font-size: 14px;
        }

<span v-bind:class="classObject(node)">{{ node.label }}</span>

调用方法，并传入节点数据

 classObject(node) {

            return {
                ntype1: node.data.object.NODETYPE == "1" ? true : false,
                ntype2: node.data.object.NODETYPE == "2" ? true : false,
            }
        },

效果：