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

我就是我 2022-03-30 03:41 444阅读 0赞 
  1. <template>
  2. <!--此div的高度取屏幕可视区域的高度-->
  3.   <div class="hello" :style="{'height':getClientHeight}">
  4.     <h5>{
  5.    { msg }}</h5>
  8.   </div>
  9. </template>
  11. <script>
  12. export default {
  13.   data() {
  14.     return {
  15.       msg: "Welcome to Your Vue.js App",
  16.     };
  17.   },
  18.   computed: {
  19.     getClientHeight:function () {
  20.     //屏幕可视区域的高度
  21.       let clientHeight = document.documentElement.clientHeight + "px"
  22.       console.log("clientHeight 1=="+clientHeight)
  23.       //窗口可视区域发生变化的时候执行
  24.       window.onresize = () => {
  25.         clientHeight = document.documentElement.clientHeight + "px"
  26.         console.log("clientHeight changed2=="+clientHeight)
  27.         return clientHeight
  28.       }
  29.       console.log("clientHeight 3=="+clientHeight)
  30.       return clientHeight
  31.     }
  32.   }
  33. };
  34. </script>
  36. <!-- Add "scoped" attribute to limit CSS to this component only -->
  37. <style scoped>
  38. .hello{
  39.   width: 100%;
  40.   background-color: #42b983;
  41. }
  43. </style>

发表评论

表情：
评论列表 （有 0 条评论，444人围观）

还没有评论，来说两句吧...

相关阅读