Vue3动态标题，点击变粗和底部提示

2024-01-07 12:28:40

欢迎来到“Vue3动态标题，点击变粗和底部提示”教程！本文将分步讲解如何使用Vue3实现标题点击变粗且底部有提示的效果。

准备工作：

确保您拥有基本的Vue3知识和开发环境。
打开您的代码编辑器并创建一个新的Vue3项目。

组件创建：

在src文件夹下创建一个新的组件文件，例如Title.vue。

<template>
  <div class="title-container">
    <h1 @click="toggleActive" :class="{ active: isActive }">{{ title }}</h1>
    <div class="line"></div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const title = ref('Vue3动态标题');
    const isActive = ref(false);

    const toggleActive = () => {
      isActive.value = !isActive.value;
    };

    return { title, isActive, toggleActive };
  },
};
</script>

<style>
.title-container {
  position: relative;
  width: 100%;
  padding: 20px;
}

h1 {
  font-size: 24px;
  font-weight: normal;
  cursor: pointer;
}

.active {
  font-weight: bold;
}

.line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #000;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

.active ~ .line {
  opacity: 1;
}
</style>

应用组件：

在App.vue文件中引入并使用刚创建的组件。

<template>
  <div id="app">
    <Title :title="'Vue3动态标题，点击变粗和底部提示'" />
  </div>
</template>

<script>
import Title from './components/Title.vue';

export default {
  components: { Title },
};
</script>