vue3 +ts +quasar 列表颜色随机

在 Vue3 中结合 TypeScript 和 Quasar 框架，如果你想给列表项的颜色添加随机效果，你可以这样做：

首先，你需要安装 `quasar-framework` 和 `vue-class-component` 这两个库来支持 TypeScript 和组件化开发。可以使用以下命令安装：

npm install quasar-framework vue-class-component

然后，在你的组件中，使用 TypeScript 定义状态并创建一个函数来生成随机颜色：

import { Component, Prop } from 'vue-property-decorator';
import { computed } from 'vue';

@Component({
  name: 'RandomColorList',
  props: {
    items: {
      type: Array,
      required: true,
    },
  },
})
export default class RandomColorList extends Vue {
  @Prop() items!: string[];

  // 定义一个计算属性来生成随机颜色
  get randomColor(index: number) {
    const colors = ['red', 'blue', 'green', 'yellow', 'purple']; // 可以自定义更多颜色
    return colors[Math.floor(Math.random() * colors.length)];
  }

  // 然后在模板里遍历items，将随机颜色应用到每个元素上
  render() {
    return this.items.map((item, index) => (
      <q-list-item :key="index" color={this.randomColor(index)}>
        {item}
      </q-list-item>
    ));
  }
}

在你的父组件中使用这个 `RandomColorList` 组件，并传入你要渲染的项目列表：

<template>
  <div>
    <RandomColorList :items="yourItemList" />
  </div>
</template>

<script lang="ts">
import RandomColorList from '@/components/RandomColorList.vue';

export default {
  components: {
    RandomColorList,
  },
  data() {
    return {
      yourItemList: ['Item 1', 'Item 2', 'Item 3'], // 你的列表内容
    };
  },
};
</script>

现在每次页面刷新或数据更新时，列表项的颜色都会随机变化。