vue --- 跑马灯制作 - 烙心

vue --->跑马灯制作

 1 <html lang="en">
 2 
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>跑马灯的制作</title>
 8 </head>
 9 <script src="../js/vue.js"></script>
10 
11 <body>
12     <div id="app">
13         <button @click="bili">点我啊</button>
14         <button @click="stop">停止啊</button>
15         <h2>{{msg}}</h2>
16     </div>
17     <script>
18         var vm = new Vue({
19             el: "#app",
20             data: {
21                 msg: "别浪 ...猥琐发育",
22                 intervalid: null
23             },
24             methods: {
25                 bili() {
26                     //let this
27                     // =>箭头函数 ---指向外部this 和外部的保持一致
28                     if (this.intervalid != null)
29                         return;
30                     this.intervalid = setInterval(() => {
31                         let start = this.msg.substring(0, 1)
32                         let end = this.msg.substring(1)
33                         this.msg = end + start
34                     }, 500)
35                 },
36                 stop() {
37                     clearInterval(this.intervalid)
38                     this.intervalid = null
39                 }
40 
41 
42             }
43         })
44 
45     </script>
46     </script>
47 </body>
48 
49 </html>
posted on 2019-05-18 16:02 烙心阅读(253) 评论(0) 编辑收藏举报