Vue中通過屬性綁定為元素綁定style行內(nèi)樣式的實(shí)例代碼
更新時(shí)間：2020年04月30日 11:02:36 作者：啃火龍果的兔子
這篇文章主要介紹了Vue中通過屬性綁定為元素綁定style行內(nèi)樣式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
1.直接在元素上通過:style的形式，書寫樣式對(duì)象
<h1 :style="{color:'red','font-weight':200}">這是一個(gè)H1</h1>
2.將樣式對(duì)象定義在data中，并直接引用到:style中
1:在data上定義樣式
data:{
styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
}
2:在元素中，通過屬性綁定的形式，將樣式對(duì)象應(yīng)用到元素中
<h1 :style="styleObj1">這是一個(gè)H1</h1>
3.在:style中通過數(shù)組，引用多個(gè)data上的樣式對(duì)象
1:在data上定義樣式
data:{
styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
styleObj2:{'font-style':'italic'},
}
2:在元素中，通過屬性綁定的形式，將樣式對(duì)象應(yīng)用到元素中
<h1 :style="[styleObj1,styleObj2]">這是一個(gè)H1</h1>
完整代碼:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id='app'>
<h1 :style="{color:'red','font-weight':200}">這是一個(gè)H1</h1>
<h1 :style="styleObj1">這是一個(gè)H1</h1>
<h1 :style="[styleObj1,styleObj2]">這是一個(gè)H1</h1>
</div>
</body>
<script src="vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
styleObj2:{'font-style':'italic'},
}
});
</script>
</html>
到此這篇關(guān)于Vue中通過屬性綁定為元素綁定style行內(nèi)樣式的文章就介紹到這了,更多相關(guān)vue style行內(nèi)樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue圖片裁剪插件vue-cropper使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
Vue3實(shí)現(xiàn)LuckSheet在線預(yù)覽Excel表格
在前端開發(fā)中預(yù)覽Excel文件是常見的需求之一,本文將介紹如何使用Vue.js框架以及兩個(gè)優(yōu)秀的Excel庫(kù)——LuckyExcel和Luckysheet,來(lái)實(shí)現(xiàn)Excel文件在線預(yù)覽功能,希望對(duì)大家有所幫助2023-11-11
熱更新全稱Hot Module Reload,常常在構(gòu)建工具里面出現(xiàn),下面這篇文章主要介紹了Vue?Vite熱更新不起作用的正確解決辦法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
Vue嵌套iframe時(shí)$router.go(-1)后退bug的原因解析
這篇文章主要介紹了Vue嵌套iframe,$router.go(-1)后退bug的問題原因及解決方法,本文給大家分享問題原因所在及解決方案,需要的朋友可以參考下吧2023-09-09
Vue實(shí)現(xiàn)點(diǎn)擊顯示不同圖片的效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)點(diǎn)擊顯示不同圖片的效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
vue簡(jiǎn)單的二維數(shù)組循環(huán)嵌套方式
這篇文章主要介紹了vue簡(jiǎn)單的二維數(shù)組循環(huán)嵌套方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3+springboot部署到Windows服務(wù)器的詳細(xì)步驟
這篇文章主要介紹了vue3+springboot部署到Windows服務(wù)器,配置Nginx時(shí)，因?yàn)楝F(xiàn)在是把vue前端交給了Nginx代理，所以這里的端口號(hào)不一定是我們?cè)趘ue項(xiàng)目中設(shè)置的端口號(hào)，本文給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-10-10
這篇文章主要介紹了Vue 使用中的小技巧,是小編日常開發(fā)的時(shí)候用到的小技巧，需要的朋友可以參考下2018-04-04
這篇文章主要給大家介紹了關(guān)于vue源碼之批量異步更新策略的相關(guān)資料，關(guān)于vue異步更新是我們?nèi)粘ｉ_發(fā)中經(jīng)常遇到的一個(gè)功能，需要的朋友可以參考下2021-05-05
這篇文章主要介紹了Vuex總體案例詳解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09