[转载]vue 动态渲染style（动态渲染样式）

转载于https://juejin.im/post/5d5dfbde6fb9a06b122f4226，原文未标注是否允许转载，如禁止，请@我

• 凡是有-的style属性名都要变成驼峰式，比如font-size要变成fontSize
• 除了绑定值，其他的属性名的值要用引号括起来，比如backgroundColor:'#00a2ff'
• ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓测试实例↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

<template>
  <div class="container">
    <div class="A" :style="{color:(currentIndex===0?'green':'#000'),fontSize:'20px'}">one</div>
    <div class="A" :style="[{color:(currentIndex===0?'red':'#000')},{fontSize:'20px'},{display:['-webkit-box', '-ms-flexbox', 'flex']}]">two</div>
    <div class="A" :style="[color,fontSize]">three</div>
    <div class="A" :style="obj">for</div>
    <child @click="test" :title="title" />
  </div>
</template>


  data() {
    return {
      obj:{color:'#000',fontSize:'26px'},
      color:{color:"gold"},
      fontSize:{fontSize:'30px'},
      currentIndex:0
    }
  },

<style lang='scss'>
.A {
  width: 200px;
  height: 100px;
  border: 1px solid rgb(179, 51, 136);
}
</style>