v-bind

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