Vue每日一题 - 创建一个计数器组件
今日题目：Vue基础 - 数据绑定与事件处理
🎯 练习要求：
创建一个简单的计数器应用，实现以下功能：
1.
显示当前计数值（初始值为0）
2.
提供"增加"按钮，点击时计数+1
3.
提供"减少"按钮，点击时计数-1
4.
提供"重置"按钮，点击时计数归零
5.
当计数为负数时，数字显示为红色
6.
当计数为正数时，数字显示为绿色
7.
当计数为0时，数字显示为黑色
——————————————
题解：
点击查看代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue计数器练习</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
.container {
text-align: center;
margin-top: 50px;
font-family: Arial, sans-serif;
}
.counter {
font-size: 48px;
font-weight: bold;
margin: 20px 0;
}
.positive { color: green; }
.negative { color: red; }
.zero { color: black; }
.btn {
font-size: 16px;
padding: 10px 20px;
margin: 0 10px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.btn-add { background-color: #4CAF50; color: white; }
.btn-subtract { background-color: #f44336; color: white; }
.btn-reset { background-color: #008CBA; color: white; }
.btn:hover { opacity: 0.8; }
</style>
</head>
<body>
<div id="app">
<div class="container">
<h1>Vue计数器</h1>
<div class="counter" :class="counterClass">{{ count }}</div>
<div>
<button class="btn btn-subtract" @click="decrease">减少 (-1)</button>
<button class="btn btn-reset" @click="reset">重置 (0)</button>
<button class="btn btn-add" @click="increase">增加 (+1)</button>
</div>
<p>当前状态: {{ statusText }}</p>
</div>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
count: 0
};
},
computed: {
counterClass() {
if (this.count > 0) return 'positive';
if (this.count < 0) return 'negative';
return 'zero';
},
statusText() {
if (this.count > 0) return '正数状态';
if (this.count < 0) return '负数状态';
return '零值状态';
}
},
methods: {
increase() {
this.count++;
},
decrease() {
this.count--;
},
reset() {
this.count = 0;
}
}
}).mount('#app');
</script>
</body>
</html>
浙公网安备 33010602011771号