vue3在循环列表数据时如何给第一条数据默认样式 然后点击列表其他数据时给点击的添加默认样式其余移除默认样式并且同时取出列表值

可以通过添加一个变量来记录当前选中的索引，然后在循环列表中根据这个变量来动态添加样式。具体实现可以参考下面的代码：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" 
          :class="{active: currentIndex === index}"
          @click="handleClick(index)">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['item1', 'item2', 'item3', 'item4'],
      currentIndex: 0,
    };
  },
  methods: {
    handleClick(index) {
      this.currentIndex = index;
      const selectedItem = this.list[index];
      console.log(selectedItem);
    },
  },
};
</script>

<style>
li {
  cursor: pointer;
}
.active {
  background-color: yellow;
}
</style>

在这个示例中，我们添加了一个 `currentIndex` 变量来记录当前选中的索引。在循环列表时，我们根据这个变量来动态添加 `active` 样式。当用户点击列表项时，我们更新 `currentIndex` 变量，然后取出相应的列表值，同时样式也会自动更新。