实现vue点击图片的不同位置，显示对应的文字提示

可以使用v-if指令和data中的变量来实现。

1. 在data中定义一个变量show，初始值为false。
2. 在template中添加一个图片元素，并为其绑定点击事件@click。
3. 在点击事件中，根据不同的位置设置show的值为true或false。
4. 在template中添加一个元素，用于显示文字提示，并使用v-if指令根据show的值来控制其显示和隐藏。

示例代码：

<template>
  <div>
    <img src="image.jpg" @click="showTip($event)">
    <div v-if="show" class="tip">{{ tip }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      tip: ''
    }
  },
  methods: {
    showTip(event) {
      const x = event.clientX
      const y = event.clientY
      if (x < 100 && y < 100) {
        this.show = true
        this.tip = '左上角'
      } else if (x > 200 && y < 100) {
        this.show = true
        this.tip = '右上角'
      } else if (x < 100 && y > 200) {
        this.show = true
        this.tip = '左下角'
      } else if (x > 200 && y > 200) {
        this.show = true
        this.tip = '右下角'
      } else {
        this.show = false
      }
    }
  }
}
</script>

<style>
.tip {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
}
</style>

在这个示例中，当点击图片的左上角、右上角、左下角、右下角时，会分别显示对应的文字提示，其他位置不显示提示。提示框使用绝对定位，并设置了半透明的黑色背景和白色文字。