使用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>
相关推荐
王同学QaQ4 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊4 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
葡萄城技术团队4 小时前
所有网站通用:6 行 HTML 代码搞定页面加载提速
html
艾小码5 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
糖糖TANG6 小时前
从零开始制作我的第一个静态网页——教师节主题首页开发记录
html
Gracemark21 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼1 天前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
前端老鹰1 天前
HTML <output> 标签:原生表单结果展示容器,自动关联输入值
前端·html
洋葱头_1 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing1 天前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化