vue,动态样式

Vue.js中根据节点类型应用不同CSS类,

最新推荐文章于 2025-11-24 03:02:26 发布

原创最新推荐文章于 2025-11-24 03:02:26 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

背景需求

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,
            }
        },

效果：