<template>
  <div>
    <span 
      :style="getStyle(1)" 
      @click="selectText(1)"
    >
      文字1
    </span>
    <span 
      :style="getStyle(2)" 
      @click="selectText(2)"
    >
      文字2
    </span>
  </div>
</template>

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

const selectedText = ref(1); // 用来存储选中的文字

// 根据选中状态动态返回样式
const getStyle = (textNum) => {
  return {
    'border-bottom': selectedText.value === textNum ? '2px solid black' : 'none',
    'cursor': 'pointer'
  };
};

const selectText = (textNum) => {
  selectedText.value = textNum; // 更新选中的文字
};
</script>

<style scoped>
span {
  margin-right: 10px;
  padding-bottom: 5px;
}
</style>
