Vue:使用Vue实现随机点名效果

一对李笠

于 2022-10-15 14:09:19 发布

阅读量1.8k

点赞数 4

分类专栏： vue 新人入门 bootstrap 文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/changpili123456/article/details/127330073

版权

本文介绍了一个使用Vue.js实现的随机点名器应用。该应用通过点击按钮启动或停止随机显示名单上的名字，利用了JavaScript的Math.random()函数和setInterval定时器。名单包括38个不同的名字。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

涉及内容：

效果展示

代码实现

涉及内容：

随机函数 Math.random()

定时器 setInterval(函数名:时间(单位毫秒))

效果展示：

代码实现

<style>
		/* 展示的div的样式 */
			.area {
				height: 200px;
				width: 200px;
				background-color: yellow;
				line-height: 200px;
				color: green;
				}
		</style>
		<!-- 绑定下面的vm模型 -->
		<div class="container " id="redom_number">
			<!-- 用<center>标签让按钮和文字居中 -->
			<center> 
				<div class="area h1"  >{
  {div_cover}}</div>
				<!-- 开始按钮绑定定时器 -->
				<button class="btn btn-primary " @click="start()"> 开始</button> 
				<!-- 结束按钮清楚定时器 -->
				<but