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

我就是我 2022-03-30 03:41 390阅读 0赞

<template>
    
      <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>
    
    
    <style scoped>
    .hello{
      width: 100%;
      background-color: #42b983;
    }
    
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，390人围观）

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

相关阅读

相关 vue中动态修改组件样式

今天遇到了个难题，在次记录一下。一般我们vue中动态修改一个组件的样式会用 :class :style等方法。今天我在修改一个组件样式的时候发现覆盖不了原有样式

客官°小女子只卖身不卖艺/ 2023年02月23日 12:28/ 0 赞/ 48 阅读

相关 CSS中margin属性值的含义

margin 定义和用法 margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。说明这个简写属性设置一个元

快来打我*/ 2023年02月08日 12:51/ 0 赞/ 36 阅读

相关 uniapp动态修改样式_Vue如何动态修改CSS变量

想要动态修改css样式就得能动态的给<style></style>赋值，可是<style></style>里面又写不了变量（有可能可以但是我不会。。），所以想了个这种办法，通过

Dear 丶/ 2022年10月13日 05:25/ 0 赞/ 2154 阅读

相关 Jsoup修改style中的属性值

Jsoup真是强大好用到无以复加，对开发jsoup的大神表示崇高的敬仰。工作中需要对word文档进行解析，获取文档的所有标题以及每一个标题下包含的内容。文档是标准的wo

我不是女神ヾ/ 2022年07月13日 13:51/ 0 赞/ 515 阅读

相关 js遍历json key 动态修改其属性值

首先定一个数组： var json = \{"name":"你好","age":18,"arr":\[13,5,6\]\}; 遍历json for(var key i

深碍√TFBOYSˉ_/ 2022年05月18日 08:21/ 0 赞/ 472 阅读

相关给伪元素的css属性动态赋值以及获取css属性值

一/ 设置值就是动态添加style $('head').append($('<style class="styleBefore">.leveltwo-scroll

灰太狼/ 2022年04月04日 05:28/ 0 赞/ 1352 阅读

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

<template>  <div class="hello" :style="{'height':g

我就是我/ 2022年03月30日 03:41/ 0 赞/ 391 阅读

相关 js动态设置css样式和标签属性值

> 使用js为css动态设置样式，有时候不起作用，或者在有的地方起作用，有的地方不起作用，没有找到原因，所以就在此记录下用到的方法 jquery的方法： 1. attr(

Myth丶恋晨/ 2022年01月26日 05:49/ 0 赞/ 320 阅读

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

<template>  <div class="hello" :style="\{'height':getClientH

偏执的太偏执、/ 2022年01月21日 03:25/ 0 赞/ 255 阅读

相关 vue 如何动态修改css样式（将data的值动态赋值，动态修改css样式）

废话不多说直接看代码 height 为动态传入的值（通过data获取）例子1：当我们动态修改的值为正数的时候 <view :style="[{ 'mar

曾经终败给现在/ 2021年07月26日 02:44/ 0 赞/ 1792 阅读