Vue 每日一题基础响应式数据
📝 题目描述
请创建一个简单的Vue 3应用，实现以下功能：
1.
创建一个计数器组件，包含一个数字显示和两个按钮（+1 和 -1）
2.
点击 +1 按钮时，数字增加1
3.
点击 -1 按钮时，数字减少1
4.
当数字为偶数时显示为绿色，奇数时显示为红色
5.
当数字小于0时，显示警告信息"数字不能为负数！"
🎯 学习目标
理解Vue 3的响应式数据
掌握事件处理
学会条件渲染和动态样式
熟悉Vue 3的组合式API
——————————————
💡 题解
方案一：选项式API (Options API)
Vue计数器
<div class="button-group">
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
<div v-if="count < 0" class="warning">
⚠️ 数字不能为负数！
</div>
方案二：组合式API (Composition API)
Vue计数器
<div class="button-group">
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
<div v-if="showWarning" class="warning">
⚠️ 数字不能为负数！
</div>
📚 知识点解析
- 响应式数据
选项式API: 通过 data() 函数返回响应式数据
组合式API: 使用 ref() 创建响应式引用 - 事件处理
使用 @click 或 v-on:click 绑定事件
方法定义在 methods 选项或直接在
浙公网安备 33010602011771号