class样式绑定2.html 820 B

1234567891011121314151617181920212223242526272829303132333435
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <title></title>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  8. <link href="../css/style.css" rel="stylesheet"> </head>
  9. <body>
  10. <div id="myApp">
  11. <div :class="myClass">红色文本</div>
  12. <button @click="btnClick">改变class吧</button>
  13. </div>
  14. <script>
  15. var myApp = new Vue({
  16. el: '#myApp',
  17. data: {
  18. myClass: {
  19. active: true,
  20. big: true,
  21. },
  22. },
  23. methods: {
  24. btnClick: function(){
  25. this.myClass.active = !this.myClass.active;
  26. this.myClass.big = !this.myClass.big;
  27. },
  28. },
  29. });
  30. </script>
  31. </body>
  32. </html>