Vue每日一题 Vue数据绑定基础

题目
请使用Vue 3创建一个简单的计数器应用，要求实现以下功能：
1.
页面显示一个数字（初始值为0）
2.
提供两个按钮：「+」和「-」
3.
点击「+」按钮时数字加1
4.
点击「-」按钮时数字减1
5.
当数字为负数时，文字颜色变为红色
6.
当数字为正数时，文字颜色变为绿色
7.
当数字为0时，文字颜色为默认黑色
——————————————
题解
HTML部分

{{ count }}

+-

JavaScript部分 const { createApp } = Vue

createApp({
data() {
return {
count: 0
}
},
computed: {
numberColor() {
if (this.count > 0) {
return 'green'
} else if (this.count < 0) {
return 'red'
} else {
return 'black'
}
}
},
methods: {
increment() {
this.count++
},
decrement() {
this.count--
}
}
}).mount('#app')
CSS部分（可选美化）

知识点解析
1.
数据绑定（data）: count 是响应式数据，当它改变时，视图会自动更新
2.
事件处理（@click）: 使用@click指令绑定点击事件到方法
3.
计算属性（computed）: numberColor根据count的值动态计算颜色
4.
条件样式绑定（:style）: 使用:style动态绑定样式
5.
插值表达式（{{ }}）: 在模板中显示数据
6.
方法（methods）: 定义可以在模板中调用的函数
扩展思考
如何添加重置按钮将计数器归零？
如何限制计数器的最大值和最小值？
如何保存计数器的状态到本地存储？
明天我们将学习Vue的条件渲染和列表渲染！