Vue动态绑定style详解

一、style绑定的基本用法

Vue.js是一个基于MVVM模式的前端框架，其中数据和DOM进行双向绑定。在Vue中可以通过v-bind绑定DOM元素的属性，包括style。Vue的动态绑定style可以让我们在DOM元素上根据数据的变化动态修改样式。

基本用法如下：

    
        <template>
            <div v-bind:style="{color: textColor, 'background-color': bgColor}">
                <p>动态绑定style</p>
            </div>
        </template>

        <script>
            export default{
                data(){
                    return{
                        textColor: 'red',
                        bgColor: 'yellow'
                    }
                }
            }
        </script>

上述代码中，我们使用v-bind绑定了div元素的style，其中color和background-color为CSS属性，textColor和bgColor为data中的属性值。当data中的属性值发生变化时，div元素的样式也会随之修改。

二、绑定style中的CSS对象语法

实际开发中，我们可能需要动态生成CSS样式对象，此时可以使用绑定style中的CSS对象语法。

示例代码如下：

    
        <template>
            <div v-bind:style="styleObj">
                <p>动态绑定style</p>
            </div>
        </template>

        <script>
            export default{
                data(){
                    return{
                        styleObj:{
                            color: 'red',
                            'background-color': 'yellow',
                            fontSize: '20px'
                        }
                    }
                }
            }
        </script>

上述代码中，我们使用v-bind绑定了div元素的style，styleObj为CSS样式对象。我们可以在data中定义或者在methods中动态生成styleObj，这样就可以实现动态修改样式的效果。

三、绑定style中的数组语法

在实际开发中，我们可能需要将多个样式对象合并为一个对象并绑定到DOM元素上，此时可以使用绑定style中的数组语法。

示例代码如下：

    
        <template>
            <div v-bind:style="[styleObj1, styleObj2]">
                <p>动态绑定style</p>
            </div>
        </template>

        <script>
            export default{
                data(){
                    return{
                        styleObj1:{
                            color: 'red',
                            'background-color': 'yellow'
                        },
                        styleObj2:{
                            fontSize: '20px',
                            padding: '10px'
                        }
                    }
                }
            }
        </script>

上述代码中，我们使用v-bind绑定了div元素的style，styleObj1和styleObj2为不同的CSS样式对象。我们可以将它们合并为一个CSS样式对象数组，绑定到DOM元素上。这样就可以实现多个样式同时作用于一个元素的效果。

四、绑定style中的普通对象语法

Vue的动态绑定style还有一种基于普通对象语法的写法，它比绑定CSS对象语法要简单一些。

示例代码如下：

    
        <template>
            <div :style="{color: textColor, backgroundColor: bgColor}">
                <p>动态绑定style</p>
            </div>
        </template>

        <script>
            export default{
                data(){
                    return{
                        textColor: 'red',
                        bgColor: 'yellow'
                    }
                }
            }
        </script>

上述代码中，我们使用v-bind简写的形式绑定了div元素的style，使用普通对象的方式指定了两个属性color和backgroundColor。数据来源于data中的属性值。此方法比较简洁，适合用在样式较少的场景。