Vue.js学习系列（三十四）-- Vue.js样式绑定（五）
2019獨角獸企業(yè)重金招聘Python工程師標準>>>
2.?Vue.js?style(內(nèi)聯(lián)樣式)
我們可以在?v-bind:style?直接設(shè)置樣式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">51code</div>
</div>
<script type="text/javascript">
new ?Vue({
el:"#app",
data:{
activeColor:"green",
fontSize:20
}
})
</script>
?
</body>
</html>
運行結(jié)果：
上述代碼中，我們通過v-bind:style="{ color: activeColor, fontSize: fontSize + 'px'設(shè)置的div的字體顏色和字體大小。
我們也可以將div的樣式綁定在一個樣式對象上，這樣看起來會更清晰
下面通過綁定樣式對象實現(xiàn)和上個例子一樣的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="styleObj">51code</div>
</div>
<script type="text/javascript">
new ?Vue({
el:"#app",
data:{
styleObj:{
color:"green",
fontSize:"20px"
}
}
})
</script>
?
</body>
</html>
v-bind:style?可以使用數(shù)組將多個樣式對象應(yīng)用到一個元素上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="[baseStyles,overridingStyles]">51code</div>
</div>
<script type="text/javascript">
new ?Vue({
el:"#app",
data:{
baseStyles:{
color:"green",
fontSize:"20px"
},
overridingStyles:{
"background-color":"yellow"
}
}
})
</script>
</body>
</html>
轉(zhuǎn)載于:https://my.oschina.net/u/2971691/blog/862994
《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的Vue.js学习系列（三十四）-- Vue.js样式绑定（五）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用Navicat连接Oracle数据库时
- 下一篇： html网页访问WebAPI中的方法遇到