<!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>vue 入门</title>
<!--1 导入vue.js库-->
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="走你" @click="go" >
<input type="button" value="@" @click="show" />
<input type="button" value="停止" @click="stop">
<h4>{{msg}}</h4>
</div>
<script>
//2 创建一个vue实例
//当导入Vue包后，在浏览器的内存中，就多了一个Vue构造函数
//在vm实例中如果要调用datas上的数据，或者想调用methods上的方法，需通过this访问
var vm = new Vue({
el: '#app', //表示当前new的这个Vue实例，要控制页面上的哪个区域
data: { //data 属性中，存放的就是el中要用到的数据
msg: '猥琐发育别浪！稳住，我们能赢！若轻云之蔽月，若流风之回雪', //通过Vue提供是指令，把数据渲染到页面，无需再手动操作DOM元素
intervalId: null //在data上绑定一个定时器id
},
methods: { //定义当前Vue实例的所有方法
show: function(){
alert('hello');
},
go(){
if(this.intervalId !=null)return;
this.intervalId = setInterval(()=>{
var start = this.msg.substring(0,1);
var end = this.msg.substring(1);
this.msg = end + start;
},200)
},
stop(){
//清除定时器
clearInterval(this.intervalId)
//将定时器id重置为null
this.intervalId = null;
}
}
})
</script>
</body>
</html>
活动
天翼云最新优惠活动，涵盖免费试用,产品折扣等，助您降本增效！
vue实现跑马灯效果
vue实现跑马灯效果
2023-04-27 08:03:05 阅读次数：123
版权声明：本文内容来自第三方投稿或授权转载，原文地址：https://blog.51cto.com/u_15696939/5415409，作者：渭城朝雨浥轻尘，版权归原作者所有。本网站转在其作品的目的在于传递更多信息，不拥有版权，亦不承担相应法律责任。如因作品内容、版权等问题需要同本网站联系，请发邮件至ctyunbbs@chinatelecom.cn沟通。
作者介绍
天翼云用户
查看更多
最新文章
Vue2和Vue3实战代码中的小差异（实时更新）
2024-12-10 06:59:17
前端项目实战
2024-11-18 09:09:27
第一个React程序
2024-11-14 08:55:41
图的存储
2024-11-06 07:24:46
Python3 - 时间处理与定时任务
2024-09-25 10:15:32
SpringCloud-技术专区-Gateway基于OAuth2.0 的身份认证
2024-09-25 10:15:32
查看更多
热门文章
Java学习之算术运算符两只老虎
2023-04-19 09:23:13
Lambda函数
2023-02-08 10:33:56
R语言方差分析（ANOVA）学生参加辅导课考试成绩差异
2023-02-08 10:33:55
r语言中对LASSO，Ridge岭回归和Elastic Net模型实现
2023-02-10 10:10:49
通过SAS网络分析对人口迁移进行可视化分析
2023-02-08 10:33:55
R语言多分类logistic逻辑回归模型在混合分布模拟个人风险损失值评估的应用
2023-02-10 05:50:40
售前咨询热线
400-810-9889转1
关注天翼云
- APP
©2024
天翼云科技有限公司版权所有 增值电信业务经营许可证A2.B1.B2-20090001
公司地址：北京市东城区青龙胡同甲1号、3号2幢2层205-32室
