v-bind

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  7.     <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  8.     <style>
  9.         .A {
  10.             width: 100px;
  11.             height: 100px;
  12.             background: green;
  13.         }
  15.         .B {
  16.             background: red;
  17.         }
  18.     </style>
  19. </head>
  21. <body>
  22.     <div id="app">
  23.         <div class="static" v-bind:class="{ 'A': a, 'B': b }">
  24.         </div>
  25.     </div>
  27.     <script>
  28.         new Vue({
  29.             el: '#app',
  30.             data: {
  31.                 a: true,
  32.                 b: false
  33.             }
  34.         })
  35.     </script>
  36. </body>
  38. </html>