Vue3实现一个标题点击变粗
时间: 2024-05-08 07:20:58 浏览: 30
首先,需要在 Vue3 中安装并导入 Vue Composition API:
```
npm install @vue/composition-api
```
然后在组件中使用 `useLink` 自定义钩子:
```vue
<template>
<div>
<h2 :class="{ 'font-bold': isBold }" @click="isBold = !isBold">{{ title }}</h2>
</div>
</template>
<script>
import { defineComponent, reactive, toRefs } from '@vue/composition-api';
export default defineComponent({
setup() {
const state = reactive({
isBold: false,
title: '这是一个标题',
});
return {
...toRefs(state),
};
},
});
</script>
```
上述代码中,我们使用 `reactive` 创建了一个响应式对象 `state`,其中包含了标题是否加粗的状态 `isBold` 和标题文本 `title`。
在模板中,我们使用 `:class="{ 'font-bold': isBold }"` 绑定了 `font-bold` 样式,当 `isBold` 为 `true` 时,标题文本将会加粗。
最后,我们使用 `@click="isBold = !isBold"` 绑定了点击事件,当用户点击标题时,`isBold` 将会取反,从而实现了点击标题变粗的效果。