vue中动态修改css其中一个属性值

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xiejunna/article/details/85785471

<template>
<!--此div的高度取屏幕可视区域的高度-->
  <div class="hello" :style="{'height':getClientHeight}">
    <h5>{{ msg }}</h5>


  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
    };
  },
  computed: {
    getClientHeight:function () {
    //屏幕可视区域的高度
      let clientHeight = document.documentElement.clientHeight + "px"
      console.log("clientHeight 1=="+clientHeight)
      //窗口可视区域发生变化的时候执行
      window.onresize = () => {
        clientHeight = document.documentElement.clientHeight + "px"
        console.log("clientHeight changed2=="+clientHeight)
        return clientHeight
      }
      console.log("clientHeight 3=="+clientHeight)
      return clientHeight
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
  width: 100%;
  background-color: #42b983;
}

</style>