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             
22 　　　　　　　<!-- v-on 事件绑定，缩写为 @ -->
23 　　　　　　　<input type="button" value="停止" :title="mytitle1 + '123'" @click="stop"/>
24             
25             <!-- {{ msg}} 后可以加入定值直接显示在页面上， 这是 插值表达式的好处，如果用 v-text则无法显示 今天天气好晴朗， 因为会被覆盖掉 -->
26             <p v-cloak> {{ msg }} 今天天气好晴朗</p>
27             
28             <!-- 可以直接输出html格式 -->
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>我是一个h1</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 <!-- 1.  如何定义一个基本的Vue代码结构  -->
71 <!-- 2.  插值表达式  和  v-text  --> 
72 <!-- 3.  v-cloak  -->
73 <!-- 4.  v-html  -->
74 <!-- 5.  v-bind  Vue提供的属性绑定机制  缩写是 : -->
75 <!-- 6.  v-on    Vue提供的事件绑定机制  缩写是 @ -->
Vue,初识v-text，v-cloak，v-html，v-bind，v-on，及跑马灯效果

猜你喜欢
