vue3制作简易计数器
时间: 2023-07-09 11:50:34 浏览: 66
好的,下面是一个简单的 Vue3 计数器示例代码:
```
<template>
<div>
<h1>计数器</h1>
<p>当前计数:{{ count }}</p>
<button @click="increment">增加</button>
<button @click="decrement">减少</button>
</div>
</template>
<script>
import { defineComponent, reactive } from 'vue'
export default defineComponent({
setup() {
const state = reactive({
count: 0
})
function increment() {
state.count++
}
function decrement() {
state.count--
}
return {
count: state.count,
increment,
decrement
}
}
})
</script>
```
在这个代码中,我们使用了 Vue3 的 `defineComponent` 和 `reactive` 方法来创建了一个组件,并且使用了 `setup` 函数来定义组件内部的状态和行为。在 `setup` 函数中,我们使用了 `reactive` 方法来创建了一个响应式数据对象 `state`,其中包含了当前的计数器 `count`。然后我们定义了两个函数 `increment` 和 `decrement`,分别用于增加和减少计数器的值。最后,我们通过 `return` 语句将计数器的值 `count` 和两个函数 `increment` 和 `decrement` 导出,以便在模板中使用。