vue实现如下效果：v-for写多个div，每个div里有一个DavaV水位图和标题，点击哪个div里的水位图和标题就改变它的css样式，而其他div样式不变

要实现这个效果，你可以在每个div中含一个DataV水位图和标题，并使用Vue的条件渲染和动态绑定样式的功能来实现点击后改变样式的效果。

以下一个示例代码：

<template  <div>
    <div
      v-for="(, index) in items"
      :key="index"
      :class="{ active: activeIndex === index }"
      @click="changeActive(index)"
    >
      <dv-water-level-pond :option="item.option"></dv-water-level-pond>
      <h3>{{ item.title }}</h3>
    </div>
  </div>
</template>

<script>
import { WaterLevelPond } from '@jiaminghi/data-view';

export default {
  components: {
    'dv-water-level-pond': WaterLevelPond
  },
  data() {
    return {
      activeIndex: null, // 初始化时没有选中的div
      items: [
        { title: 'Title 1', option: { /* 水位图配置项 */ } },
        { title: 'Title 2', option: { /* 水位图配置项 */ } },
        { title: 'Title 3', option: { /* 水位图配置项 */ } },
        // 更多的div...
      ]
    };
  },
  methods: {
    changeActive(index) {
      this.activeIndex = index;
    }
  }
};
</script>

<style>
.active {
  /* 添加选中样式 */
}
</style>

在上面的代码中，我们使用v-for指令遍历items数组，每个item包含一个标题和一个DataV水位图。通过绑定点击事件，当点击某个div时，将其索引值赋给activeIndex，从而改变对应div的样式。

你可以根据具体的需求，在items数组中添加更多的div配置项，每个配置项包含相应的标题和水位图配置项。同时，你也可以根据DataV文档提供的API来进一步自定义水位图的样式和行为。