Basic.vue 751 B

12345678910111213141516171819202122232425262728293031
  1. <template>
  2. <div class="hello">
  3. <h1 :class="headingClasses">{{ msg }}</h1>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: 'basic',
  9. computed: {
  10. headingClasses: function headingClasses() {
  11. return {
  12. red: this.isCrazy,
  13. blue: !this.isCrazy,
  14. shadow: this.isCrazy,
  15. };
  16. },
  17. },
  18. data: function data() {
  19. return {
  20. msg: 'Welcome to Your Vue.js App',
  21. isCrazy: false,
  22. };
  23. },
  24. methods: {
  25. toggleClass: function toggleClass() {
  26. this.isCrazy = !this.isCrazy;
  27. },
  28. },
  29. };
  30. </script>