十六、内联style.html

使用v-bind:style可以给元素绑定内联样式，不过在实际开发中尽量避免内联样式的出现，内联样式不便于维护。

1、对象语法

       1>v-bind:style 的对象语法十分直观，看着非常像CSS，但其实是一个JavaScript对象。

       2>CSS属性名可以用驼峰式（camelClass）或短横线分隔（kebab-case，记得用引号括起来）来命名。

            <div :style="{width:‘100px‘,height:‘100px‘,fontSize:‘14px‘,‘background-color‘:‘#FF0000‘}">style样式</div>

       3>内联样式直接用对象字面量的方式设置，可读性较差，直接绑定到一个样式对象通常更好，这让模板更清晰。

            <div :style="styleObj">style样式</div>

2、数组语法

       <div :style="[styleObj,borderObj]">style样式</div>

<template v-if="false"><!--1(3)、直接绑定到一个样式对象（推荐这种写法）-->
<div :style="styleObj">style样式</div>
</template>
<script>
let data={
styleObj:{
width:‘100px‘,
height:‘100px‘,
‘font-size‘:‘14px‘,
backgroundColor:‘#FF0000‘
},
};
</script>

十六、内联style.html

原文：https://www.cnblogs.com/Strugglinggirl/p/15236448.html