动态style样式.

作用 给标签动态设置style的值

语法

<标签 :style = "{css属性值:值}"/>

1.可以和静态style共存

2.样式中带-属性写成小驼峰

• 示例代码

<div id="app">
        <h3 class="title">v-bind-绑定style</h3>
    
       <!-- 把对象的属性名和属性值直接设置到style中 -->
        <div class="box" :style="styleObj">
            1. 绑定对象
        </div>

        <!-- 把数组中的每一个元素（对象），取出来，组成style -->
        <div class="box" :style="styleArr">
            2. 绑定数组
        </div>
        <button @click="hBlack">改成黑色的字</button>
    </div>
    <script>
        // v-bind 是用来动态绑定元素的属性，而style也是元素的属性
        // 目标： 可以通过动绑定style来控制样式 。

        // 方式：
        // 1. 绑定对象
        // 2. 绑定数组

        const vm = new Vue({
            el: "#app",
            // el: document.getElementById("app"),
            data: {
                styleObj: {
                    color:'red',
                    // 如果属性名有-，则要加''
                    'background-color':'blue'
                },
                // 数组中的每一项都是一个对象，其中以键值对的格式设置了style
                styleArr:[ {color:'red','font-weight':'bold'}, {'font-size':'50px'} ]
            },
            methods: {
                hBlack () {
                    // 直接把styleObj中的color设置成black
                    this.styleObj.color = "black"
                   
                }
            }
        })
    </script>