Vue綁定內(nèi)聯(lián)樣式問題
使用 v-bind:style 可以給元素綁定內(nèi)聯(lián)樣式,方法與:class類似,也有對象語法和數(shù)組語法,看起來很直接在元素上寫CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
</head>
<body>
<div id="app">
<div :style="{ 'color': color, 'fontSize': fontSize + 'px' }"></div>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
color: 'red',
fontSize: 14
},
});
</script>
</body>
</html>
CSS屬性名稱使用駝峰命名(camelCase)或短橫分隔命名(kebab-case),渲染后的結(jié)果為:
<div style="color: red; font-size: 14px">文本</div>
大多數(shù)情況下,直接寫一串的樣式不便于閱讀和維護(hù),所以一般寫在data或computed里,以data為例寫上面的示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
</head>
<body>
<div id="app">
<div :style="styles"></div>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
color: 'red',
fontSize: 14 + 'px'
},
});
</script>
</body>
</html>
應(yīng)用多個樣式對象時,可以使用數(shù)組語法:
<div :style="[styleA, styleB]">文本</div>
在實(shí)際業(yè)務(wù)中, :style的數(shù)組語法并不常用,因?yàn)橥梢詫懺谝粋€對象里面; 而較為常用的應(yīng)用是計算屬性.
另外,使用:style時,Vue.js會自動給特殊的CSS屬性名稱增加前綴,比如transform.
總結(jié)
以上所述是小編給大家介紹的Vue綁定內(nèi)聯(lián)樣式問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
詳解Vue+Element的動態(tài)表單，動態(tài)表格（后端發(fā)送配置，前端動態(tài)生成）
這篇文章主要介紹了Vue+Element動態(tài)表單動態(tài)表格，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
在V8中，JavaScript的內(nèi)存空間分為棧（Stack）和堆（Heap）兩部分，垃圾回收的基本思路是：查找內(nèi)存中的所有變量，看哪些已經(jīng)不再需要，然后釋放這些變量所占用的內(nèi)存，本文就給大家梳理一下V8垃圾回收系統(tǒng),需要的朋友可以參考下2023-07-07
Vue移動端實(shí)現(xiàn)圖片上傳及超過1M壓縮上傳
這篇文章主要為大家詳細(xì)介紹了Vue移動端實(shí)現(xiàn)圖片上傳及超過1M壓縮上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
vue-cli 為項(xiàng)目設(shè)置別名的方法
這篇文章主要介紹了vue-cli 為項(xiàng)目設(shè)置別名的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
前端文件導(dǎo)出設(shè)置responseType為blob時遇到的問題及解決
這篇文章主要給大家介紹了關(guān)于前端文件導(dǎo)出設(shè)置responseType為blob時遇到的問題及解決方法,文中通過圖文介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
vue axios調(diào)用接口方法報錯500 internal server err
前端使用axios 訪問后端接口時報錯,在瀏覽器中點(diǎn)擊紅色的報錯數(shù)據(jù),本文給大家分享vue axios調(diào)用接口方法報錯500 internal server error的兩種解決方法,感興趣的朋友一起看看吧2023-10-10
正常情況下Vue推薦用props向子組件參數(shù),但是在特定場景下,使用$attrs會更方便,下面這篇文章主要給大家介紹了關(guān)于vue2.x中$attrs使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章給大家分享Vue3搭建組件庫開發(fā)環(huán)境，給大家講解依次搭建組件庫、example、文檔、cli，本文內(nèi)容是搭建組件庫的開發(fā)環(huán)境的過程，感興趣的朋友跟隨小編一起看看吧2022-11-11
vue計算屬性無法監(jiān)聽到數(shù)組內(nèi)部變化的解決方案
今天小編就為大家分享一篇vue計算屬性無法監(jiān)聽到數(shù)組內(nèi)部變化的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue ElementUI this.$confirm async await封
這篇文章主要介紹了Vue ElementUI this.$confirm async await封裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09