Nuxt.js框架下实现点击按钮递增count功能的问题求助

功能验证 #

你提供的代码已经可以正常实现点击按钮递增count的需求，没有语法错误，运行后初始值为1，每点击一次按钮count数值加1。

优化建议 #

• 非表单场景下建议把按钮的type="submit"改为type="button"，避免误触表单提交的默认行为
• 点击逻辑可以抽离为独立方法，后续要扩展功能（比如增加计数上限、添加点击统计等）时更易维护
• 文本渲染可以用更简洁的双大括号插值语法，可读性更高

优化后选项式API代码 #

<template>
    <button type="button" class="btn btn-default" @click="addCount">
        <p>{{ count }}</p>
    </button>
</template>

<script>
export default {
    data() {
        return {
            count: 1
        }
    },
    methods: {
        addCount() {
            // 可在此处扩展额外逻辑
            this.count += 1
        }
    }
}
</script>

Vue3 组合式API参考写法 #

如果你使用的是Vue3，可以用更简洁的组合式API写法：

<template>
    <button type="button" class="btn btn-default" @click="count++">
        <p>{{ count }}</p>
    </button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(1)
</script>

内容的提问来源于stack exchange，提问作者Adaquate Lumps