挑战小程序开发百日学习计划（第四天） V-bind：style

挑战百日学习计划，为自己做 (南宁小程序开发：www.zkelm.com )
做技术积累，人没有梦想不足于慰平生。 准备先攻克前端，后进军ai 和单片机 ，以下都是我一个一个代码敲的实例， 希望对大家有帮助，写得不是很好 ，大神请飘过

Vue之 Class操作 style
v-bind：style=“{对象}/数组”
实例：v-bind：style=“objectstyle”

<script>
 new Vue({
    el:"#app",
    data:{
        objectstyle:{
             color:"red",
             fontSize:'30px'
        }    
    }
})
 
</script>
<div id="app">
<p v-bind:style="objectstyle">这里的字体会变化</p>
</div>

显示结果：

其实 如果css的样式有-符号 需要使用波峰命名

font-size =fontSize or ’font-size‘ 用引号引起来

总结：对象的相同点
v-bind:class="{对象}"
v-bind:style=“{对象}”
对象=【建】：【值】

建=网页元素
值= vue变量

数组绑定 v-bind：style=[a,b]

<div v-bind:style="[baseStyles,overridingsStyle]"></div>
<script>
  new Vue({
    el:"app",
    data:{
    baseStyle:{
         color:geen,
         fontSize:'30px'
    },
    overridingStyle:{
           'font-weight':'hold'

   }
    }

})
</script>