我就廢話不多說了，大家還是直接看代碼吧~
|
1
2
3
4
5
6
7
|
<template><!--此div的高度取屏幕可視區域的高度--> <div class="hello" :style="{'height':getClientHeight}"> <h5>{{ msg }}</h5> </div></template> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<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> |
|
1
2
3
4
5
6
7
8
|
<!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.hello{ width: 100%; background-color: #42b983;}</style> |
補充知識：vue中動態style(如何動態修改偽元素樣式)
vue中如何動態修改偽元素樣式
vue項目中我們可以通過行內樣式進行動態修改樣式,大家都會就舉栗子了
如何動態修改偽元素樣式?
1.css中如何用變量
聲明css變量的時候，變量名前面要加兩根連詞線（–）。
變量名大小寫敏感，–header-color和–Header-Color是兩個不同變量。
var()函數用于讀取變量。
var()函數還可以使用第二個參數，表示變量的默認值。如果該變量不存在，就會使用這個默認值。
第二個參數不處理內部的逗號或空格，都視作參數的一部分。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<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中動態行內樣式進行偽元素動態屬性設置
|
1
2
3
4
5
6
7
|
<template> <div class="test"> <span :style="spanStyle" class="span1">hello world</span> <br> <span :style="{'--width': widthVar}" class="span2">hello earth</span> </div></template> |
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<script>export default { data() { return { spanStyle: { "--color": "red" }, widthVar: "100px" }; }}</script> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<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中動態修改css其中一個屬性值操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/xiejunna/article/details/85785471
