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样式都会被修改。