• v-bind属性绑定

    对象方式绑定:

    <!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="vue.js"></script>

    </head>

    <body>

        <style>

            .kk{

                font-size30px;

            } 

        </style>

          <div id="app">

            <div  v-bind:class="{kk:isg}">

                急急急

            </div>

          </div>

        <script>

          var app = new Vue({

              el:'#app',

              data:{

                  isg:true

              }

          })

        </script>

    </body>

    </html>

    数组方式绑定:

    <!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="vue.js"></script>

    </head>

    <body>

        <style>

            .kk{

                font-size30px;

            } 

            .gg{

                background-colorblanchedalmond;

            }

        </style>

          <div id="app">

            <div  v-bind:class="[isg,isd]">

                急急急

            </div>

          </div>

        <script>

          var app = new Vue({

              el:'#app',

              data:{

                  isg:'kk'

                  isd:'gg'

              }

          })

        </script>

    </body>

    </html>