vue 默认第一个div变色 点击第二个变色第一个不变色

可以通过给两个 div 添加不同的 class，并利用 Vue 的条件渲染来实现这个效果。

首先，在 Vue 的数据中添加一个变量，用来表示是否选中第二个 div。例如，我们可以将其命名为 `selected`，初始值设为 `false`。

然后，在模板中，给第一个 div 添加一个条件判断，如果 `selected` 为 `false`，则添加一个用于变色的 class；给第二个 div 添加另一个条件判断，如果 `selected` 为 `true`，则添加相同的用于变色的 class。

最后，在第二个 div 上添加点击事件，当点击时，将 `selected` 的值改为 `true`。

下面是一个示例代码：

<template>
  <div>
    <div :class="{ 'div1': !selected }">第一个 div</div>
    <div :class="{ 'div2': selected }" @click="selectSecond">第二个 div</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: false
    };
  },
  methods: {
    selectSecond() {
      this.selected = true;
    }
  }
};
</script>

<style>
.div1 {
  /* 第一个 div 的样式 */
}

.div2 {
  /* 第二个 div 的样式 */
}
</style>

这样，初始状态下第一个 div 会有变色的样式，当点击第二个 div 后，第一个 div 不再变色，而第二个 div 变色。