快捷導(dǎo)航

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

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

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

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

<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ā)生變化的時(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í)候，變量名前面要加兩根連詞線（–）。

變量名大小寫敏感，–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 :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中動(dòng)態(tài)修改css其中一個(gè)屬性值操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue項(xiàng)目中使用fontawesome圖標(biāo)庫(kù)的方法
fontawesome的圖標(biāo)有免費(fèi)版和專業(yè)版,本文主要使用free版本,一般free版本的圖標(biāo)夠用,free圖標(biāo)又劃分為三個(gè)圖標(biāo)庫(kù),主要有實(shí)心圖標(biāo)solid、常規(guī)圖標(biāo)regular及品牌圖標(biāo)brand,根據(jù)需求去下載對(duì)應(yīng)的圖標(biāo)庫(kù),無(wú)須全部下載,對(duì)vue?fontawesome圖標(biāo)庫(kù)相關(guān)知識(shí)感興趣的朋友一起看看吧
2023-12-12
Vue2?特殊符號(hào)讓人傻傻分不清?“:”、“.”、“@”、“#”?、“{{}}“?、“$“,‘$bus‘,‘$e
:”是指令?“v-bind”的縮寫“.”是修飾符?“@”是指令“v-on”的縮寫?,它用于監(jiān)聽?DOM?事件?“#”是v-slot的縮寫,這篇文章主要介紹了Vue2?新手上路無(wú)處不在的特殊符號(hào)讓人傻傻分不清“:”、“.”、“@”、“#”?、“{{}}“?、“$“,$bus,$event,需要的朋友可以參考下
2024-08-08
前端實(shí)現(xiàn)Vue組件頁(yè)面跳轉(zhuǎn)的多種方式小結(jié)
這篇文章主要為大家詳細(xì)介紹了前端實(shí)現(xiàn)Vue組件頁(yè)面跳轉(zhuǎn)的多種方式,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,有需要的小伙伴可以了解下
2024-02-02
Vue實(shí)現(xiàn)批量注冊(cè)全局組件的示例代碼
在項(xiàng)目開發(fā)中,我們經(jīng)常會(huì)封裝一些全局組件,然后在入口文件中統(tǒng)一導(dǎo)入,所以本文主要為大家詳細(xì)介紹了Vue如何批量注冊(cè)全局組件,感興趣的小伙伴可以了解下
2024-01-01
Vue3+El-Plus實(shí)現(xiàn)表格行拖拽功能完整代碼
在vue3+elementPlus網(wǎng)站開發(fā)中,詳細(xì)完成el-table表格的鼠標(biāo)拖拽/拖曳/拖動(dòng)排序,下面這篇文章主要給大家介紹了關(guān)于Vue3+El-Plus實(shí)現(xiàn)表格行拖拽功能的相關(guān)資料,需要的朋友可以參考下
2024-05-05
如何使用Vue3設(shè)計(jì)實(shí)現(xiàn)一個(gè)Model組件淺析
v-model在Vue里面是一個(gè)語(yǔ)法糖,數(shù)據(jù)的雙向綁定,本質(zhì)上還是通過(guò) 自定義標(biāo)簽的attribute傳遞和接受,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3設(shè)計(jì)實(shí)現(xiàn)一個(gè)Model組件的相關(guān)資料,需要的朋友可以參考下
2022-08-08
vue cli 3.0通用打包配置代碼,不分一二級(jí)目錄
這篇文章主要介紹了vue cli 3.0通用打包配置代碼,不分一二級(jí)目錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
vue中如何使用xlsx讀取excel文件實(shí)例代碼
在Vue中使用xlsx庫(kù)可以幫助我們讀取和寫入Excel文件,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用xlsx讀取excel文件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-12-12
詳解Vue微信公眾號(hào)開發(fā)踩坑全記錄
本篇文章主要介紹了詳解Vue微信公眾號(hào)開發(fā)踩坑全記錄，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
如何實(shí)現(xiàn)vue的tree組件
這篇文章主要介紹了如何實(shí)現(xiàn)vue的tree組件，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下
2020-12-12