vue绑定内联样式

对象语法由key和value
key就是样式属性名,value就是样式值(可以使用动态值,也可以静态值)
样式属性名包含特殊字符号,要么驼峰写法,要么使用引号包裹
我们可以在js中控制值的改变
将colorValue的值和我们data中的数据进行绑定,当data中的colorValue发生改变时,color样式也会发生改变
<div v-bind:style="{color:colorValue,fontSize:size,'font-weight':weight}">
  我是div的内容
</div> 
<script>
  let vm = new Vue({
    el : "#app",
    data : {
      colorValue:'blue',
      size:'30px',
      weight:'bold',
    }
  })
</script>

posted @ 2024-08-15 15:42  洛飞  阅读(16)  评论(0编辑  收藏  举报