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 <!-- v-cloak 能解决插件表达式闪烁问题 -->
9 [v-cloak]{
10 display: none;
11 }
12 </style>
13 <body>
14 <div id="app">
15 <!-- v-text 默认没有闪烁问题 -->
16 <!-- v-text 会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符， 不会把 整个元素的内容清空-->
17 <div v-text="msg1"></div>
18
19 <!-- v-bind 属性绑定，缩写为 ：-->
20 <input type="button" value="点击" :title="mytitle + '123'" @click="begin"/>
21
<@-- v-on 事件绑定，缩写为 @ -->
<input type="button" value="停止" :title="mytitle1 + '123'" @click="stop"/>
22
23 <p v-cloak> {{ msg }} 今天天气好晴朗</p>
24
25 <!-- 可以直接输出html格式 -->
26 <div v-html="msg2"></div>
27 </div>
28
29 </body>
30 </html>
31 <script src="../js/vue.js"></script>
32 <script>
33 var vm = new Vue({
34 el: '#app',
35 data: {
36 msg1: 'hahaha',
37 msg: '123456，789',
38 msg2: '<h1>我是一个h1</h1>',
39 mytitle: '请点击',
40 mytitle1: '点击停止',
41 intervalId: null //在data上定义 定时器Id
42 },
43 methods: {
44 begin(){
45 console.log(this.msg)
46 if (this.intervalId != null) return;
47 // 获取第一个字符 this
48 this.intervalId = setInterval( () => {
49 var start = this.msg.substring(0,1)
50 // 获取到 后面的字符
51 var end = this.msg.substring(1)
52 // 重新拼接得到新的字符串
53 this.msg = end + start
54 }, 400)
55 },
56 stop(){ //停止计时器
57 clearInterval(this.intervalId);
58 //每当清除了定时器之后,需要把 intervalId 置为 null
59 this.intervalId = null;
60 }
61 },
62 })
63 </script>
64
65
66
67 <!-- 1. 如何定义一个基本的Vue代码结构 -->
68 <!-- 2. 插值表达式 和 v-text -->
69 <!-- 3. v-cloak -->
70 <!-- 4. v-html -->
71 <!-- 5. v-bind Vue提供的属性绑定机制 缩写是 : -->
72 <!-- 6. v-on Vue提供的事件绑定机制 缩写是 @ -->
标签：Vue,start,text,cloak,intervalId,var,跑马灯,msg,null 来源： https://www.cnblogs.com/wo1ow1ow1/p/10990821.html