前面六篇讲解了Vue的一些基础知识，正所谓：学以致用，今天我们将用前六篇的基础知识，来实现类似跑马灯的项目。
学前准备：
需要掌握定时器的两个函数：setInterval和clearInterval以及作用域的概念
上代码，大家可以复制下来直接运行看看效果（vue.min.js 第一篇有下载链接）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>跑马灯效果</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body> <!-- 页面部分 -->
<div id="app">
<button @click="go()">开始</button> <button @click="stop()">停止</button>
<p>{{ msg }}</p>
</div>
<!-- JS部分 -->
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : ‘好好努力，我的奥迪s5~‘,//跑马灯文字
interObj : null //定时器对象
},
methods : {
go(){
if(this.interObj == null){
_this = this
this.interObj = setInterval(function(){
let start = _this.msg.substring(0,1);
let end = _this.msg.substring(1);
_this.msg = end + start;
},1000);
}
},
stop(){
clearInterval(this.interObj);
this.interObj = null;
}
}
});
</script>
</body>
</html>
代码分析：
页面上定义两个按钮，分别用来触发跑马灯效果和停止跑马灯效果。js部分分别定义了两个对象以及对应的方法。
1、go方法主要是使用定时器，每次把msg文本分成两个部分start和end，start为msg下标为0的字符串，end为msg下标为1至结尾的字符串，然后把end和start拼接为一个新的字符串赋值给msg，从而实现类似于跑马灯的效果。
2、end方法用来清除定时器，终止跑马灯效果。
3、methods方法里想要使用datat里的数据，需要使用关键字：this，但是这里要注意this作用域的范围。
4、大家可以看到每次改变msg文本内容的时候都会立刻反应在页面上，从侧面可以看出Vue响应式的特点。
内容还是很简单的，主要是用来练习基础的Vue知识。
学编程一定要勤动手，多练习，多思考！
每天进步一点点！
原文地址：https://www.cnblogs.com/shibin90/p/10320216.html
时间： 2024-07-29 17:37:42