Vue 跑马灯效果
程序员文章站
2022-03-03 09:30:59
...
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<!-- 2.创建一个要控制的区域 -->
<div id="app">
<input type="buttoin" value="浪起来" @clic="lang">
<input type="buttoin" value="低调">
<h4>{{ msg }}</h4>
</div>
<script>
//注意： 在V没事哩中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过this数据属性名 或 this.方法名 来进行访问，这里的this. 就表示我们new出来的VM实例对象
var vm = new Vue ({
el: '#app',
data: {
msg: '猥琐发育，别浪~~ ！'
},
methods: {
lang(){
setINterva1( () => {
var start = this.msg.substring(0,1)
//
var end = this.msg.substring(1)
//
this.msg = end + start
}, 400)
}
}
})
// 分析
// 1.给【浪起来】按钮，帮第一个点击事件 v-on @
// 2.在按钮的时间处理函数中，写相关的业务逻辑代码：拿到面试官字符串，然后 调用字符串的substring 来进行字符串的截取操作，把第一个字符串截取出来，放到最后一个位置即可，
</script>
</body>
</html>