4.vue方法使用.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <div id="app">
  10. {{timer}}
  11. </div>
  12. <script src="../vue.js"></script>
  13. <script>
  14. // function formData() {
  15. // var data = new Date();
  16. // var year = data.getFullYear();
  17. // var mouth = data.getMonth() + 1;
  18. // var day = data.getDate();
  19. // var hour = data.getHours();
  20. // var minutes = data.getMinutes();
  21. // var seconds = data.getSeconds();
  22. // this.timer = year + '年' + mouth + '月' + day + '日' + hour + '时' + minutes + '分' + seconds + '秒'
  23. // }
  24. var app = new Vue({
  25. el:"#app",
  26. data:{
  27. timer: null
  28. },
  29. // 第一种:生命周期 created 创建前
  30. created() {
  31. this.formData();
  32. },
  33. // 方法
  34. methods: {
  35. // formData
  36. formData() {
  37. var data = new Date();
  38. var year = data.getFullYear();
  39. var mouth = data.getMonth() + 1;
  40. var day = data.getDate();
  41. var hour = data.getHours();
  42. var minutes = data.getMinutes();
  43. var seconds = data.getSeconds();
  44. this.timer = year + '年' + mouth + '月' + day + '日' + hour + '时' + minutes + '分' + seconds + '秒'
  45. }
  46. },
  47. })
  48. </script>
  49. </body>
  50. </html>