在vue中動態(tài)修改css其中一個屬性值操作

更新時間：2020年12月07日 10:17:09 作者：xiejunna

這篇文章主要介紹了在vue中動態(tài)修改css其中一個屬性值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

我就廢話不多說了，大家還是直接看代碼吧~

<template>
<!--此div的高度取屏幕可視區(qū)域的高度-->
 <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 () {
  //屏幕可視區(qū)域的高度
   let clientHeight = document.documentElement.clientHeight + "px"
   console.log("clientHeight 1=="+clientHeight)
   //窗口可視區(qū)域發(fā)生變化的時候執(zhí)行
   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>

補充知識：vue中動態(tài)style(如何動態(tài)修改偽元素樣式)

vue中如何動態(tài)修改偽元素樣式

vue項目中我們可以通過行內樣式進行動態(tài)修改樣式,大家都會就舉栗子了

如何動態(tài)修改偽元素樣式?

1.css中如何用變量

聲明css變量的時候，變量名前面要加兩根連詞線（–）。

變量名大小寫敏感，–header-color和–Header-Color是兩個不同變量。

var()函數(shù)用于讀取變量。

var()函數(shù)還可以使用第二個參數(shù)，表示變量的默認值。如果該變量不存在，就會使用這個默認值。

第二個參數(shù)不處理內部的逗號或空格，都視作參數(shù)的一部分。

<style>
body {
 --highlight-color: green;
}
.container {
 --highlight-color: red;
}
a {
 color: var( --highlight-color );
}
</style>
<body>
 <div class="container">
  <a href="">Link</a>
 </div>
</body>

2.根據css中使用變量的方法,我們可以結合vue中動態(tài)行內樣式進行偽元素動態(tài)屬性設置

<template>
  <div class="test">
    <span :style="spanStyle" class="span1">hello world</span>
    <br>
    <span :style="{'--width': widthVar}" class="span2">hello earth</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      spanStyle: {
        "--color": "red"
      },
      widthVar: "100px"
    };
  }
}
</script>

<style scoped>
  .span1 {
    color: var(--color);
  }
  .span2 {
    text-align: center;
    position: relative;
    width: var(--width);
  }
  .span2::after {
    content: '';
    display: block;
    position: absolute;
    left: 100%; 
    width: var(--width);
    height: var(--width);
    border-radius: 50%;
    border: 2px solid black;   
  }
</style>

以上這篇在vue中動態(tài)修改css其中一個屬性值操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: