我们先看我们常用的css绑定方式，以及如何实现两个css的绑定，可以看如下例子

    1. <head>
    2.         <meta charset="utf-8">
    3.         <title></title>
    4.         <style type="text/css">
    5.             .basic{
    6.                 font-size: 22px;
    7.                 color: black;
    8.             }
    10.             .red {
    11.                 border:5px solid red;
    12.             }
    14.             .green {
    15.                 border:5px solid green;
    16.             }
    18.             .black {
    19.                 border: 10px  solid black;
    20.             }
    22.         </style>
    23.     </head>
    27.     <body>
    28.         <div>
    29.             <p class="basic red" > 您好 </p>
    30.         </div>
    31.     </body>

    那么我们如何在Vue中实现呢？

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .basic{
                font-size: 22px;
                color: black;
            }

            .red {
                border:5px solid red;
            }

            .green {
                border:5px solid green;
            }

            .black {
                border: 10px  solid black;
            }

        </style>
    </head>



    <body>
        <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>

        <div id="app" class="basic" >
            {{ name }}
        </div>

        <script>
                var vm = new Vue ({
                    data: {
                        name: "hello world",
                    }
                }); 
                vm.$mount("#app")
        </script>

    </body>
</html>

    现在的逻辑是我们怎么能够使用Vue 增加不同的class 属性并且可以@click变换属性

    <body>
        <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>

        <div id="app" class="basic" v-bind:class="yangshi"  v-on:click="changeyangshi">
            {{ name }}
        </div>


        <script>
                var vm = new Vue ({
                    data: {
                        name: "hello world",
                        yangshi:"red"
                    },
                    methods :{
                        changeyangshi(){
                            this.yangshi = "green"
                        }
                    }
                }); 
                vm.$mount("#app")
        </script>

    </body>

    加上这个方式

    <div id="app" class="basic" v-bind:class="yangshi"  v-on:click="changeyangshi">
            {{ name }}
        </div>

    那么最终呈现出来的原代码是什么类型的呢？
    image.png
    实际上通过v-bind:class=来实现绑定多个class
    如果我们希望以上三个class随机显示
    var index = Math.floor(Math.random()*3)
    因为Math.random()产生的数据为0-1.0 之间，那么乘以3 就是 0-3.0之间
    Math.floor 是向下取整

    <body>
        <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>

        <div id="app" class="basic" v-bind:class="yangshi"  v-on:click="changeyangshi">
            {{ name }}
        </div>


        <script>
                var vm = new Vue ({
                    data: {
                        name: "hello world",
                        yangshi:"red"
                    },
                    methods :{
                        changeyangshi(){
                            var yangshis = ["green","blue","red"]
                            var index = Math.floor(Math.random()*3)
                            this.yangshi = yangshis[index]
                        }
                    }
                }); 
                vm.$mount("#app")
        </script>