vue 动态样式 ，style，class

**class 动态样式，可以跟变量，数组，json
如果跟json后面是“类名”：boolean，如果是真值就添加这个类名，假值就不添加。

class后面跟json**

<style>
        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }
        .purple{
            background-color: purple;
        }
        .yellow{
            background-color: yellow;
        }
    </style>
     <!-- 每四行隔行变色 -->
        <!-- 0 4 8
        1 5 9
        2 6 10
        3 7 11 -->
        <table>
            <tr v-for="(item,index) in 12"  
            **:class="{red:index%4==0,yellow:index%4==1,blue:index%4==2,purple:index%4==3}">**
                <td>{{index}}</td>
            </tr>
        </table>

style 动态style 后面跟的是json,也可以是变量

<div id="app">
        <h2 :style="red">春江花月夜</h2>    //red是一个json对象，里面写着css的样式值
        <button @click=change>修改样式</button>
    </div>
    <script>
        new Vue({
            el: "#app", 
            data: { 
                red:{
                    background:"red",
                    color:"white",
                }
            },
            methods: { //方法
                change(){     //点击修改json的值就可以修改h2的样式了
                    this.red.background = "black",
                    this.red.color = "red"
                }
            }
        })
    </script>