Vue,初识v-text,v-cloak,v-html,v-bind,v-on,及跑马灯效果

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>title>
 6     head>
 7 <style>
 8     
 9         [v-cloak]{
10             display: none;
11         }
12 style>    
13     <body>
14         <div id="app">
15             
16             
17             <div v-text="msg1">div>
18             
19             
20             <input type="button" value="点击" :title="mytitle + '123'" @click="begin"/>
21             
22        
23        <input type="button" value="停止" :title="mytitle1 + '123'" @click="stop"/>
24             
25             
26             <p v-cloak> {{ msg }} 今天天气好晴朗p>
27             
28             
29             <div v-html="msg2">div>
30         div>
31         
32     body>
33 html>
34 <script src="../js/vue.js">script>
35 <script>
36     var vm = new Vue({
37         el: '#app',
38         data: {
39             msg1: 'hahaha',
40             msg: '123456,789',
41             msg2: '

我是一个h1

', 42 mytitle: '请点击', 43 mytitle1: '点击停止', 44 intervalId: null //在data上定义 定时器Id 45 }, 46 methods: { 47 begin(){ 48 console.log(this.msg) 49 if (this.intervalId != null) return; 50 // 获取第一个字符 this 51 this.intervalId = setInterval( () => { 52 var start = this.msg.substring(0,1) 53 // 获取到 后面的字符 54 var end = this.msg.substring(1) 55 // 重新拼接得到新的字符串 56 this.msg = end + start 57 }, 400) 58 }, 59 stop(){ //停止计时器 60 clearInterval(this.intervalId); 61 //每当清除了定时器之后,需要把 intervalId 置为 null 62 this.intervalId = null; 63 } 64 }, 65 }) 66 script> 67 68 69 70 71 72 73 74 75

 

转载于:https://www.cnblogs.com/wo1ow1ow1/p/10990821.html

你可能感兴趣的:(Vue,初识v-text,v-cloak,v-html,v-bind,v-on,及跑马灯效果)