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

Posted 2022-07-28 xiejunna

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