第一种方法：内联样式style（行内样式）的动态渲染

<div id="app">
        <!-- 内联样式style（行内样式）的动态渲染 -->
        <h1 :style="{color,fontSize}">兄弟们，我凉凉了</h1>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                color:"red",
                fontSize:"50px"
            }

            methods: {
                
            }
        })
    </script>

如代码所示，在data 数据中心 写上样式，在视图层使用 v-bind: 指令(简写为 ：)以数组的形式写在指令中，并在页面渲染

输出结果为：

 

---

2.多个内联样式，在数据中心data里，将其罗列在对象中。然后将这个对象，渲染到视图层

 
    <div id="app">
        <!-- 多个内联样式，在数据中心data里，将罗列在对象中。然后将这个对象，渲染到视图层 -->
        <h1 :style="styleObject">我凉凉了老铁们</h1>
    </div>

   <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                styleObject:{
                    color:"blue",
                    fontSize:"40px",
                    textDecoration:"underline"
                }
            },
            methods: {
                
            }
        })
    </script>

如代码所示，我们在 data 数据中心中 以数组的形式 罗列出要写的样式，并在视图层 用

v-bind: 直接输出 data 数据中心 所写的 对象名

输出结果：

 

---

3.多个内联样式，我们在动态渲染的时候， 可以将其放在视图层的数组中[]

 注意：你放在数组中的这些内容，在数据中心data中一定要是一个对象

我们可以在数据中心 data 中，定义两个或多个对象用来存放样式

 <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                styleObj:{color:'blue',fontSize:'20px'},
                styObj1:{backgroundColor:"green"}
            },
            methods:{}
        })
    </script>

在视图层引入样式，可以引入多个，但一定要放入 [] 中

   <!-- 可以引入一个样式，也可以多个 -->
        <h1 :style="[styleObj,styObj1]">我是一个成熟的h1</h1>
        <!-- 样式不会被重叠，但是一定要放在数组中 -->

输出结果为：