<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .static{
            border: 1px solid black;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 静态写法 -->
        <h1 class="static" style="background-color: green;">{{msg}}</h1>
        <!-- 字符串形式 -->
        <h1 class="static" :style="mStyle">{{msg}}</h1>
        <!-- 对象形式 -->
        <!-- 凡是带减号的去掉换成驼峰 -->
        <h1 class="static" :style="{backgroundColor: 'green'}">{{msg}}</h1>
        <!-- 定义对象的方式 -->
        <h1 class="static" :style="styleObj">{{msg}}</h1>
        <!-- 数组形式 -->
        <h1 class="static" v-bind:style="styleArray">{{msg}}</h1>
    </div>
    <script>
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                mStyle : "background-color: gray;",
                styleObj : {backgroundColor: 'red'},
                styleArray : [
                    {backgroundColor : 'green'},
                    {color : 'red'}
                ]
            }
        });
    </script>
</body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.