咔叽游戏

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 569|回复: 1

[JavaScript] 在vue中动态修改css其中一个属性值操作

[复制链接]
  • TA的每日心情
    无聊
    2019-4-21 13:02
  • 签到天数: 3 天

    [LV.2]圆转纯熟

    发表于 2020-12-19 14:05:23 | 显示全部楼层 |阅读模式
    我就废话不多说了,大家还是直接看代码吧~
    1. <template>
    2. <!--此div的高度取屏幕可视区域的高度-->
    3. <div class="hello" :style="{'height':getClientHeight}">
    4.   <h5>{{ msg }}</h5>
    5. </div>
    6. </template>
    复制代码
    1. <script>
    2. export default {
    3. data() {
    4.   return {
    5.    msg: "Welcome to Your Vue.js App",
    6.   };
    7. },
    8. computed: {
    9.   getClientHeight:function () {
    10.   //屏幕可视区域的高度
    11.    let clientHeight = document.documentElement.clientHeight + "px"
    12.    console.log("clientHeight 1=="+clientHeight)
    13.    //窗口可视区域发生变化的时候执行
    14.    window.onresize = () => {
    15.     clientHeight = document.documentElement.clientHeight + "px"
    16.     console.log("clientHeight changed2=="+clientHeight)
    17.     return clientHeight
    18.    }
    19.    console.log("clientHeight 3=="+clientHeight)
    20.    return clientHeight
    21.   }
    22. }
    23. };
    24. </script>
    复制代码
    1. <!-- Add "scoped" attribute to limit CSS to this component only -->
    2. <style scoped>
    3. .hello{
    4. width: 100%;
    5. background-color: #42b983;
    6. }
    7. </style>
    复制代码
    补充知识:vue中动态style(如何动态修改伪元素样式)
    vue中如何动态修改伪元素样式
    vue项目中我们可以通过行内样式进行动态修改样式,大家都会就举栗子了
    如何动态修改伪元素样式?
    1.css中如何用变量
    声明css变量的时候,变量名前面要加两根连词线(–)。
    变量名大小写敏感,–header-color和–Header-Color是两个不同变量。
    var()函数用于读取变量。
    var()函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。
    第二个参数不处理内部的逗号或空格,都视作参数的一部分。
    1. <style>
    2. body {
    3. --highlight-color: green;
    4. }
    5. .container {
    6. --highlight-color: red;
    7. }
    8. a {
    9. color: var( --highlight-color );
    10. }
    11. </style>
    12. <body>
    13. <div class="container">
    14.   <a href="">Link</a>
    15. </div>
    16. </body>
    复制代码
    2.根据css中使用变量的方法,我们可以结合vue中动态行内样式进行伪元素动态属性设置
    1. <template>
    2.   <div class="test">
    3.     <span :style="spanStyle" class="span1">hello world</span>
    4.     <br>
    5.     <span :style="{'--width': widthVar}" class="span2">hello earth</span>
    6.   </div>
    7. </template>
    复制代码
    1. <script>
    2. export default {
    3.   data() {
    4.     return {
    5.       spanStyle: {
    6.         "--color": "red"
    7.       },
    8.       widthVar: "100px"
    9.     };
    10.   }
    11. }
    12. </script>
    复制代码
    1. <style scoped>
    2.   .span1 {
    3.     color: var(--color);
    4.   }
    5.   .span2 {
    6.     text-align: center;
    7.     position: relative;
    8.     width: var(--width);
    9.   }
    10.   .span2::after {
    11.     content: '';
    12.     display: block;
    13.     position: absolute;
    14.     left: 100%;
    15.     width: var(--width);
    16.     height: var(--width);
    17.     border-radius: 50%;
    18.     border: 2px solid black;   
    19.   }
    20. </style>
    复制代码
    以上这篇在vue中动态修改css其中一个属性值操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持咔叽论坛。

    原文地址:https://www.jb51.net/article/201560.htm
  • TA的每日心情

    2023-11-24 16:52
  • 签到天数: 6 天

    [LV.2]圆转纯熟

    发表于 2023-11-13 16:44:40 | 显示全部楼层
    vue项目中我们可以通过行内样式进行动态修改样式,大家都会就举栗子了
    回复 支持 反对

    使用道具 举报

    QQ|免责声明|小黑屋|手机版|Archiver|咔叽游戏

    GMT+8, 2024-3-29 22:58

    Powered by Discuz! X3.4

    © 2001-2023 Discuz! Team.

    快速回复 返回顶部 返回列表