uniapp 中用vue3 左右联动代码

以下是一个简单的示例，展示了如何在uniapp中使用vue3实现左右联动：

<template>
  <view class="container">
    <view class="left-list">
      <view
        class="list-item"
        :class="{ active: activeIndex === index }"
        v-for="(item, index) in leftList"
        :key="index"
        @click="handleClickLeft(index)"
      >
        {{ item }}
      </view>
    </view>
    <view class="right-list">
      <view
        class="list-item"
        v-for="(item, index) in rightList"
        :key="index"
        v-show="activeIndex === index"
      >
        {{ item }}
      </view>
    </view>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      leftList: ['A', 'B', 'C', 'D'],
      rightList: [
        ['A1', 'A2', 'A3'],
        ['B1', 'B2', 'B3'],
        ['C1', 'C2', 'C3'],
        ['D1', 'D2', 'D3'],
      ],
      activeIndex: 0,
    });

    const handleClickLeft = (index) => {
      state.activeIndex = index;
    };

    return {
      state,
      handleClickLeft,
    };
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100vh;
}

.left-list {
  width: 200rpx;
  background-color: #eee;
  overflow-y: scroll;
}

.right-list {
  flex: 1;
  background-color: #fff;
  overflow-y: scroll;
}

.list-item {
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
}

.list-item.active {
  background-color: #f00;
  color: #fff;
}
</style>

在这个示例中，我们使用了`reactive`函数创建了一个响应式对象`state`，其中包含了左侧列表和右侧列表的数据以及当前选中的索引。我们通过`v-for`指令渲染了左侧列表和右侧列表，并使用`v-show`指令控制右侧列表的显示。当左侧列表的某一项被点击时，我们更新了`activeIndex`的值，从而实现了左右联动的效果。