v-bind绑定style
-
绑定方式一:对象语法
:style="{color: current,fontSize: fontSize + 'px'}"
- style 后面跟的是一个对象类型
- 对象的key是css属性
- 对象的value是具体赋的值,值可以来自data中的属性
- style 后面跟的是一个对象类型
-
绑定方式二:数组语法
<div v-bind:style="[baseStyle, overridingStyle]"></div>
- style 后面跟的是一个数组类型
- 多个值以,分割即可
- style 后面跟的是一个数组类型
<div id="app">
<!-- 对象语法 -->
<!-- <h2 :style='{key(属性名): value(属性值)}'></h2> -->
<h2 :style="{fontSize: finsize +'px', color: 'skyblue'}">{{ message }}</h2>
<!-- 数组语法 -->
<h2 :style="[baseStyle]">{{ message }}</h2>
</div>
<script src="./vue.min.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'hello',
finsize: 16 ,
baseStyle: {fontSize: '50px',color: 'red'}
}
})
</script>