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

你可以使用v-for指令来循环数组对象列表，然后使用v-bind:class指令来绑定CSS类。在默认情况下，你可以使用一个CSS类来实现第一条数据的默认样式。然后，你可以使用v-on:click指令来监听单击事件，在单击其中一个列表项时，你可以使用一个方法来改变当前选中项的样式并返回该项的值。使用Vue data对象中的属性来保存当前选中的项并根据需要在方法中更新它。

下面是一份可能的Vue3代码示例：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in itemList"
          v-bind:key="index"
          v-bind:class="{'selected': index==selectedIndex}"
          v-on:click="selectItem(index)">
        {{ item.name }}
      </li>
    </ul>
    <div v-if="selectedIndex>=0">
      Selected: {{ itemList[selectedIndex].name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemList: [
        { name: 'Item 1', value: 1 },
        { name: 'Item 2', value: 2 },
        { name: 'Item 3', value: 3 }
      ],
      selectedIndex: 0
    }
  },
  methods: {
    selectItem(index) {
      this.selectedIndex = index
    }
  }
}
</script>

<style>
.selected {
  font-weight: bold;
}
</style>

在上面的代码中，我们定义了一个data对象，包含一个itemList数组和一个selectedIndex属性。我们在v-for指令中循环itemList数组，并使用v-bind:class指令来绑定selected CSS类。我们还定义了一个selectItem方法，该方法在单击每个列表项时触发，并将当前选中的项的索引保存在selectedIndex属性中。我们还使用一个静态CSS类.selected来定义选中项的样式。