在vue中動(dòng)態(tài)修改css其中一個(gè)屬性值操作
我就廢話不多說(shuō)了，大家還是直接看代碼吧~
<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ā)生變化的時(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='http://www.cgvv.com.cn/bcjs/10521.html'>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>
以上這篇在vue中動(dòng)態(tài)修改css其中一個(gè)屬性值操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 小技巧處理div內(nèi)容溢出2. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)3. 怎樣才能用js生成xmldom對(duì)象，并且在firefox中也實(shí)現(xiàn)xml數(shù)據(jù)島？4. 解析原生JS getComputedStyle5. .NET SkiaSharp 生成二維碼驗(yàn)證碼及指定區(qū)域截取方法實(shí)現(xiàn)6. PHP字符串前后字符或空格刪除方法介紹7. jsp實(shí)現(xiàn)登錄界面8. XML入門(mén)的常見(jiàn)問(wèn)題(二)9. 得到XML文檔大小的方法10. PHP循環(huán)與分支知識(shí)點(diǎn)梳理
網(wǎng)公網(wǎng)安備