4.vue中方法的使用.html 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  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. <div>名字:{{name}}</div>
  11. <div>年龄:{{age}}</div>
  12. <!-- <button>修改名字</button> -->
  13. <div>当前时间:{{timer}}</div>
  14. </div>
  15. <script src="./vue.js"></script>
  16. <script>
  17. // function getTime(){
  18. // var data = new Date();
  19. // var year = data.getFullYear();
  20. // var mouth = data.getMonth() + 1;//0-11
  21. // var day = data.getDay();
  22. // var hour = data.getHours();
  23. // var minutes = data.getMinutes();
  24. // var second = data.getSeconds();
  25. // }
  26. var app = new Vue({
  27. el:"#app",
  28. data:{
  29. name:"小郑",
  30. age: 35,
  31. timer:""
  32. },
  33. // 进入页面的时候 执行倒计时
  34. // 生命周期:---created 创建后 监听页面的数据是否发生改变
  35. created() {
  36. this.getMain();
  37. },
  38. // vue2中的方法
  39. methods: {
  40. // 获取时间的方法
  41. getTime(){
  42. var data = new Date();
  43. var year = data.getFullYear();
  44. var mouth = data.getMonth() + 1;//0-11
  45. var day = data.getDate();
  46. var hour = data.getHours();
  47. var minutes = data.getMinutes();
  48. var second = data.getSeconds();
  49. this.timer = year + '年' + mouth + '月' + day + '日' + hour + '小时' + minutes + '分' + second + '秒';
  50. },
  51. // 倒计时的方法
  52. getMain() {
  53. setInterval(()=>{
  54. this.getTime();
  55. },1000)
  56. }
  57. },
  58. })
  59. </script>
  60. </body>
  61. </html>