vue.js - 前端如何动态绑定后端返回的样式数据？

Question

后端返回样式数据，比如el-header的height：60，前端如何将返回的json数据动态绑定到el-header中，同时假设el-header有个子元素的line-height需要等于60，那么，如何将拿到的数据60也绑定到子元素上

Answer 1

1.如果需要绑定的属性比较少，可以用

<div :style="getStyle"></div>

export default {
    data() {
        return {
            style: {}
        };
    },
    computed: {
        getStyle() {
            return {
                lineHeight: style.lineHeight
                ...
            }
        }
    }
}

2.类似VNode，将需要的渲染的元素保存成类型如下格式

vNode = {
    tag: "div",
    className: [],
    style: {
        lineHeight: 60
    },
    ...
};

然后使用render函数去渲染就好了，或者使用

<component :is="tag" v-bind="{ style }" />

Answer 2

直接用动态style绑定样式到标签上就行吧

:style="{height:height,line-height: lineHeight}"
//height,lineHeight为data里面定义好的变量，根据接口返回的重新赋值就行