Vue中通過(guò)屬性綁定為元素綁定style行內(nèi)樣式的實(shí)例代碼
更新時(shí)間：2020年04月30日 11:02:36 作者：啃火龍果的兔子
這篇文章主要介紹了Vue中通過(guò)屬性綁定為元素綁定style行內(nèi)樣式,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
1.直接在元素上通過(guò):style的形式，書(shū)寫(xiě)樣式對(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:在元素中，通過(guò)屬性綁定的形式，將樣式對(duì)象應(yīng)用到元素中
<h1 :style="styleObj1">這是一個(gè)H1</h1>
3.在:style中通過(guò)數(shù)組，引用多個(gè)data上的樣式對(duì)象
1:在data上定義樣式
data:{
styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
styleObj2:{'font-style':'italic'},
}
2:在元素中，通過(guò)屬性綁定的形式，將樣式對(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中通過(guò)屬性綁定為元素綁定style行內(nèi)樣式的文章就介紹到這了,更多相關(guān)vue style行內(nèi)樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章給大家分享了vue axios二次封裝的相關(guān)知識(shí)點(diǎn)等內(nèi)容以及實(shí)例代碼，有興趣的朋友可以參考學(xué)習(xí)下。2018-07-07
Vue2實(shí)時(shí)監(jiān)聽(tīng)表單變化的示例講解
今天小編就為大家分享一篇Vue2實(shí)時(shí)監(jiān)聽(tīng)表單變化的示例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue3使用keep?alive實(shí)現(xiàn)前進(jìn)更新后退銷(xiāo)毀
這篇文章主要為大家介紹了vue3中使用keep?alive實(shí)現(xiàn)前進(jìn)更新后退銷(xiāo)毀示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要為大家詳細(xì)介紹了vue圖片裁剪插件vue-cropper使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要為大家介紹了vue之mixin的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
vue中提供了一種混合機(jī)制--mixins，用來(lái)更高效的實(shí)現(xiàn)組件內(nèi)容的復(fù)用。下面給大家談?wù)勎覍?duì)vue中mixin的一點(diǎn)理解，需要的朋友參考下吧2017-12-12
vue3引入ElementUI報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了vue3引入ElementUI報(bào)錯(cuò)問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue 百度地圖(vue-baidu-map)繪制方向箭頭折線實(shí)例代碼詳解
這篇文章主要介紹了vue 百度地圖(vue-baidu-map)繪制方向箭頭折線,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
Element如何實(shí)現(xiàn)loading的方法示例
本文主要介紹了Element如何實(shí)現(xiàn)loading的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
解決vue無(wú)法偵聽(tīng)數(shù)組及對(duì)象屬性的變化問(wèn)題
這篇文章主要介紹了解決vue無(wú)法偵聽(tīng)數(shù)組及對(duì)象屬性的變化問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07