vue基础-动态style / :style=“{css属性: 值}“

vue基础-动态style

目标: 给标签动态设置style的值

• 语法
  • :style="{css属性: 值}"

<template>
  <div>
      <!-- :style="css属性：值" -->
      <button @click="one">点击变色01</button>
      <button @click="two">点击变色02</button>
      <button @click="three">点击变色03</button>
      <div :style="{backgroundColor : bl}">盒子</div>
  </div>
</template>

<script>
export default {
data () {
    return {
      bl:'red'
    }
},
methods: {
    one(){
        this.bl = 'blue'
    },
    two(){
        this.bl = 'gold'
    },
    three(){
        this.bl = 'orange'
    }
}
}
</script>

<style>

</style>

总结: 动态style的key都是css属性名