使用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>
相关推荐
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui
游戏开发爱好者810 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
_pengliang11 小时前
小程序按住说话
开发语言·javascript·小程序
paid槮11 小时前
HTML5如何创建容器
前端·html·html5
midsummer_woo12 小时前
基于springboot+vue+mysql工程教育认证的计算机课程管理平台(源码+论文)
vue.js·spring boot·mysql
拾光拾趣录12 小时前
HTML行内元素与块级元素
前端·css·html
喝拿铁写前端13 小时前
技术是决策与代价的平衡 —— 超大系统从 Vue 2 向 Vue 3 演进的思考
前端·vue.js·架构
万岳科技程序员小金13 小时前
多端协同的招聘系统源码开发指南:小程序+APP一体化设计
小程序·软件开发·app开发·招聘小程序·同城招聘系统源码·招聘app开发·招聘软件开发
豆豆(设计前端)13 小时前
如何成为高级前端开发者:系统化成长路径。
前端·javascript·vue.js·面试·electron
xkxnq13 小时前
微信小程序地理定位功能
微信小程序·小程序