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属性名