Vue style与css的var()

vue绑定style直接给css的var变量传递一个值，然后结合css的var()函数使用这个值。

在data里面定义一个变量然后给定一个值，后期修改这个值之后，所有依赖这个变量的css样式都会被响应式地修改。css用var()函数来使用这个变量，变量前要加--。

代码演示：

<div id="app">
    <div class="header" :style="{'--heightVar': heightVal}">header</div>
    <div class="body">body</div>
    <div class="footer" :style="{'--heightVar': heightVal}">footer</div>
</div>
<script type="text/javascript">
    let vm = new Vue({
        el: '#app',
        data: () => {
            return {
                heightVal: '50px'
            }
        }
    })
</script>
<style type="text/css">
    .header,
    .footer {
        background: rgb(53, 122, 187);
    }

    .body {
        height: 150px;
        background: rgb(37, 205, 218);
    }

    .header {
        height: var(--heightVar);
    }

    .footer {
        height: var(--heightVar);
    }
</style>

在浏览器中演示：

页脚和头部的height css样式都使用了--heightVar变量，而它的值又是Vue的heightVal传来的，所以当修改heightVal的值之后所有依赖于--heightVar变量的css样式都会被修改。