在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)樣式進行動態(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.intensediesel.com/bcjs/10521.html'>Link</a> </div></body>
2.根據(jù)css中使用變量的方法,我們可以結(jié)合vue中動態(tài)行內(nèi)樣式進行偽元素動態(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. jsp+servlet簡單實現(xiàn)上傳文件功能（保存目錄改進）2. ASP.NET Core依賴注入DI容器的方法實現(xiàn)3. 基于JSON的高級AJAX開發(fā)技術(shù)4. 《CSS3實戰(zhàn)》筆記--漸變設(shè)計（一)5. CSS3實例分享之多重背景的實現(xiàn)(Multiple backgrounds)6. 讀大數(shù)據(jù)量的XML文件的讀取問題7. ASP.NET MVC通過勾選checkbox更改select的內(nèi)容8. 探究Android客戶端網(wǎng)絡(luò)預(yù)連接優(yōu)化機制9. ztree+ajax實現(xiàn)文件樹下載功能10. ajax實現(xiàn)頁面的局部加載
網(wǎng)公網(wǎng)安備