当点击一个li标签时，它的样式会发生变化，vue3代码实现

在Vue3中，你可以通过`v-once`指令结合`@click`事件监听器以及计算属性或者数据绑定来实现在点击`<li>`标签时改变其样式。这里是一个简单的示例：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index" @click="toggleItemClass(index)">
      {{ item.text }}
    </li>
  </ul>
</template>

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

// 创建一个ref存储每个元素的初始样式
const initialStyle = ref({ backgroundColor: 'initial' });

// 计算属性来动态切换背景颜色
const itemStyles = computed(() => {
  return { backgroundColor: initialStyle.value[index] ? '' : 'red' };
});

function toggleItemClass(index) {
  // 根据索引更新样式
  initialStyle.value[index] = !initialStyle.value[index];
}
</script>

<style scoped>
li {
  transition: background-color 0.5s;
}
</style>

在这个例子中，我们创建了一个数组`items`并遍历渲染到`<li>`列表中。当用户点击某一项时，会触发`toggleItemClass`函数，该函数通过修改`initialStyle`数组中对应项的值来切换背景颜色。`v-if`或`v-show`也可以用于类似的效果，但在这里我们用计算属性来简化操作。