使用VUE语法的HTML小程序(计数器)

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/vue.js"></script>
    <style>
        .screen {
            width: 100px;
            height: 60px;
            background-color: #FEDFE1;
            position: relative;
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
        }
    </style>
</head>
<body>
<div id="app">
    <div class="screen">{{ number }}</div>
	<input type="button" :value="buttonText" @click="toggleCounter" />
	<input type="button" value="复位" @click="resetCounter" />
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            number: 0,
            timer: null,
            isRunning: false,
            buttonText: '开始'
        },
        methods: {
            toggleCounter: function() {
                if (!this.isRunning) {
                    this.isRunning = true;
                    this.buttonText = '停止';
                    // 从1开始计数
                    this.number = 1;
                    this.timer = setInterval(() => {
                        // 计数递增
                        this.number++;
                    }, 1000);
                } else {
                    clearInterval(this.timer);
                    this.isRunning = false;
                    this.buttonText = '开始';
                }
            },
            resetCounter: function() {
                clearInterval(this.timer);
                this.number = 0;
                this.isRunning = false;
                this.buttonText = '开始';
            }
        }
    });
</script>
</body>
</html>
相关推荐
zhanshuo3 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang4 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil6 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
HERR_QQ3 小时前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
孤水寒月7 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀7 小时前
html初学者第一天
前端·html
速易达网络9 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
lyj16899710 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
racerun11 小时前
小程序导航设置更多内容的实现方法
小程序
说私域11 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源