動(dòng)態(tài)修改vue中css的屬性值

發(fā)布時(shí)間：2020-12-07 14:22:47 來(lái)源：億速云閱讀：1416 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

這篇文章給大家介紹動(dòng)態(tài)修改vue中css的屬性值，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

具體方法如下：

<template>
<!--此div的高度取屏幕可視區(qū)域的高度-->
 <div class="hello" :>
  <h6>{{ msg }}</h6>

 </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ā)生變化的時(shí)候執(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>

補(bǔ)充知識(shí)：vue中動(dòng)態(tài)style(如何動(dòng)態(tài)修改偽元素樣式)

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

vue項(xiàng)目中我們可以通過(guò)行內(nèi)樣式進(jìn)行動(dòng)態(tài)修改樣式,大家都會(huì)就舉栗子了

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

1.css中如何用變量

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

變量名大小寫(xiě)敏感，–header-color和–Header-Color是兩個(gè)不同變量。

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

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

第二個(gè)參數(shù)不處理內(nèi)部的逗號(hào)或空格，都視作參數(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.根據(jù)css中使用變量的方法,我們可以結(jié)合vue中動(dòng)態(tài)行內(nèi)樣式進(jìn)行偽元素動(dòng)態(tài)屬性設(shè)置

<template>
  <div class="test">
    <span : class="span1">hello world</span>
    <br>
    <span : 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>

關(guān)于動(dòng)態(tài)修改vue中css的屬性值就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

動(dòng)態(tài)修改vue中css的屬性值

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽