vue3中如何实现鼠标放到一个div上显示title

在 Vue3 中，可以通过 `v-bind` 指令来绑定 `title` 属性并显示。具体实现步骤如下：

1. 在组件中添加一个 `div` 元素，并绑定 `title` 属性和一个自定义属性 `myTitle`：

<template>
  <div v-bind:title="myTitle"></div>
</template>

2. 在 `data` 中声明 `myTitle` 属性，并设置默认值：

<script>
export default {
  data() {
    return {
      myTitle: "这是默认的title"
    }
  }
}
</script>

3. 添加 `mouseover` 和 `mouseout` 事件监听器来修改 `myTitle` 的值：

<script>
export default {
  data() {
    return {
      myTitle: "这是默认的title"
    }
  },
  methods: {
    onMouseOver() {
      this.myTitle = "鼠标放在div上的title";
    },
    onMouseOut() {
      this.myTitle = "这是默认的title";
    }
  }
}
</script>

<template>
  <div v-bind:title="myTitle" @mouseover="onMouseOver" @mouseout="onMouseOut"></div>
</template>

这样，当鼠标移动到 `div` 元素上时，`myTitle` 属性的值将会被修改，从而实现了鼠标放到一个 `div` 上显示 `title` 的效果。