在vue中動態修改css其中一個屬性值操作
我就廢話不多說了，大家還是直接看代碼吧~
<template><!--此div的高度取屏幕可視區域的高度--> <div :style='{’height’:getClientHeight}'> <h5>{{ msg }}</h5> </div></template>
<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>
<!-- 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()函數還可以使用第二個參數，表示變量的默認值。如果該變量不存在，就會使用這個默認值。
第二個參數不處理內部的逗號或空格，都視作參數的一部分。
<style>body { --highlight-color: green;}.container { --highlight-color: red;}a { color: var( --highlight-color );}</style><body> <div class='container'> <a href='http://www.wxshucaidpc.com/bcjs/10521.html'>Link</a> </div></body>
2.根據css中使用變量的方法,我們可以結合vue中動態行內樣式進行偽元素動態屬性設置
<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>
以上這篇在vue中動態修改css其中一個屬性值操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。
相關文章：
網公網安備