在vue中動態(tài)修改css其中一個屬性值操作
我就廢話不多說了，大家還是直接看代碼吧~
<template><!--此div的高度取屏幕可視區(qū)域的高度--> <div :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項目中我們可以通過行內(nèi)樣式進(jìn)行動態(tài)修改樣式,大家都會就舉栗子了
如何動態(tài)修改偽元素樣式?
1.css中如何用變量
聲明css變量的時候，變量名前面要加兩根連詞線（?）。
變量名大小寫敏感，?header-color和?Header-Color是兩個不同變量。
var()函數(shù)用于讀取變量。
var()函數(shù)還可以使用第二個參數(shù)，表示變量的默認(rèn)值。如果該變量不存在，就會使用這個默認(rèn)值。
第二個參數(shù)不處理內(nèi)部的逗號或空格，都視作參數(shù)的一部分。
<style>body { --highlight-color: green;}.container { --highlight-color: red;}a { color: var( --highlight-color );}</style><body> <div class='container'> <a href='http://www.4tl426be.cn/bcjs/10521.html'>Link</a> </div></body>
2.根據(jù)css中使用變量的方法,我們可以結(jié)合vue中動態(tài)行內(nèi)樣式進(jìn)行偽元素動態(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>
以上這篇在vue中動態(tài)修改css其中一個屬性值操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. android 控件同時監(jiān)聽單擊和雙擊實例2. 解決vue頁面刷新，數(shù)據(jù)丟失的問題3. Python 忽略文件名編碼的方法4. vue路由分文件拆分管理詳解5. 詳解android adb常見用法6. vue+vuex+axios從后臺獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作7. python logging.info在終端沒輸出的解決8. android studio實現(xiàn)簡單的計算器（無bug）9. python Selenium 庫的使用技巧10. python 讀txt文件,按‘,’分割每行數(shù)據(jù)操作
網(wǎng)公網(wǎng)安備