Vue3实现一个标题点击变粗

首先，我们需要在 Vue3 中定义一个变量来控制标题是否加粗，可以使用 `ref` 方法：

import { ref } from 'vue';

export default {
  setup() {
    const isBold = ref(false);
    const handleClick = () => {
      isBold.value = !isBold.value;
    };

    return {
      isBold,
      handleClick,
    };
  },
};

然后，在模板中使用 `v-bind:class` 来根据 `isBold` 的值来添加或移除 `bold` 类名：

<template>
  <h1 v-bind:class="{ bold: isBold }" v-on:click="handleClick">Vue3标题</h1>
</template>

<style>
  .bold {
    font-weight: bold;
  }
</style>

这样，当用户点击标题时，`handleClick` 方法会被触发，将 `isBold` 的值取反，然后根据 `isBold` 的值来添加或移除 `bold` 类名，从而控制标题是否加粗。

相关问题

Vue3实现标题点击标题变粗代码

可以使用Vue3中的指令来实现这个效果，具体实现如下：

1. 在Vue3组件中定义一个data属性，用来记录标题是否被点击。

<script>
import { ref } from 'vue'

export default {
  setup() {
    const isClicked = ref(false)

    return {
      isClicked
    }
  }
}
</script>

2. 在模板中添加一个点击事件，当标题被点击时，修改isClicked的值。

<template>
  <h1 @click="isClicked = !isClicked" :class="{ 'bold': isClicked }">
    {{ title }}
  </h1>
</template>

<style>
.bold {
  font-weight: bold;
}
</style>

3. 在样式中定义bold类，用来设置标题的字体加粗样式。

这样，当用户点击标题时，标题的字体会变粗，再次点击则会取消加粗效果。

用vue3实现一个登陆页面

实现一个登录页面，需要使用 Vue 的模板语法，组件和相关指令。可以这样实现：

1. 创建一个 Vue 实例，并声明需要的数据和方法：

<template>
  <div>
    <form>
      <input type="text" v-model="username" placeholder="请输入用户名">
      <input type="password" v-model="password" placeholder="请输入密码">
      <button @click.prevent="submitForm">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    submitForm() {
      // 实现表单提交逻辑
    }
  }
};
</script>

2. 使用 v-model 指令绑定输入框的值到 Vue 实例的数据上。

3. 使用 @click 指令绑定按钮的点击事件，并使用 prevent 修饰符阻止默认行为。

4. 在 submitForm 方法中实现表单提交的逻辑，例如发送请求到服务器进行验证。

这是一个简单的登录页面实现，可以根据需要进行扩展。