同理,v-bind绑定style的对象语法:
<template id="my-app">
<div :style="{color: finalColor,'font-size': '30px'}">哈哈</div>
<div :style="{color: finalColor,fontSize: '30px'}">哈哈</div>
<div :style="{color: finalColor,fontSize: finalSize + 'px'}">哈哈</div>
<div :style="finalStyleObj">哈哈哈</div>
<div :style="getFinalStyleObj()">哈哈哈</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app={
template:"#my-app",
data(){
return{
finalColor: 'red',
finalSize: 50,
finalStyleObj:{
color: 'red',
fontSize: '70px',
backgroundColor: 'black'
}
}
},
methods:{
getFinalStyleObj(){
return {
color: 'red',
fontSize: '70px',
backgroundColor: 'black'
}
}
}
};