vue3组合式api单文件组件写法
<template>
<div>
<h1>{{ title }}</h1>
<button @click="increment">{{ counter }}</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const counter = ref(0);
const title = '计数器';
function increment() {
counter.value++;
}
return {
counter,
title,
increment
};
}
};
</script>
<style scoped>
button {
padding: 10px 20px;
background-color: #42b983;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
这个例子展示了如何在Vue 3中使用组合式API创建一个简单的计数器组件。组件包括一个标题和一个按钮,点击按钮可以增加计数器的值。使用<style scoped>
保证样式只应用于当前组件。
评论已关闭