Vue——04——跑马灯效果案例
程序员文章站
2022-03-03 09:34:53
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<!-- 创建一个要控制的区域 -->
<div id="app">
<h4>{{ msg }}</h4>
<input type="button" value="move" @click="move">
<input type="button" value="stop" @click="stop">
</div>
<!-- 注意：vm实例会监听自己身上data中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data上同步到页面中去，程序员只需要关心数据，不需要考虑重新渲染数据
给第一个按钮绑定一个点击事件
在按钮的事件处理函数中，写相关的业务逻辑代码，拿到msg字符串
然后调用字符串的substring来进行字符串的截取操作，把第一个字符截取出来
，放到最后一个位置
为了实现点击下按钮自动截取的功能，需要把2步骤中的代码，放到一个定时器中去 -->
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "今天天气真好~~",
intervalId:null
},
methods: {
move() { //es6写法，省略了function
// 1.在vm实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过
// this.数据属性名或this.方法名来访问，这里的This，就表示我们new出来的vm实例对象
// console.log(this.msg);
if(this.intervalId!=null)return;//如果不等于Null 说明定时器已经开启了，return出去
this.intervalId=setInterval( ()=> {//使用箭头函数，内部this和外部this保持一致的
var start = this.msg.substring(0, 1)
var end = this.msg.substring(1)
this.msg = end + start
}, 400)
},
stop(){
clearInterval(this.intervalId)
this.intervalId=null
}
}
})
</script>
</body>
</html>
上一篇： vue-i18n国际化的使用
下一篇： 比较两个二叉树是否相同