场景:创建一个persons的集合,约束里面每个person属性,add方法为添加一个person进去
这里的代码用的vue3写的逻辑只有js
<template>
<div class="person">
<template v-for="item in persons" :key="item.id">
<ul>
<li>{{ item.name }}</li>
<li>{{ item.sex }}</li>
<li>{{ item.age }}</li>
</ul>
</template>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
const Component = defineComponent({
setup() {
// 声明元素类型(元素info)
class personType {
id?: number;
name: string;
sex: string;
age: number;
constructor(name: string, sex: string, age: number, id?: number) {
this.name = name;
this.sex = sex;
this.age = age;
this.id = id;
}
}
// 定义操作属性
interface personCircle<T> {
// 类型为T的元素组成的数组
data: T[];
//添加类型为T的元素无需返回值
add: (t: T) => void;
}
//构建类
class personCrud implements personCircle<personType> {
// 类型为personType的元素组成的数组(对应上方的泛型变量T)
data: personType[] = [];
add(t: personType) {
this.data.push(t);
}
}
//创建实例
let persons = new personCrud();
persons.add(new personType("张三", "男", 18, 1));
persons.add(new personType("张三", "男", 18));
console.log(persons);
return {
persons: persons.data,
};
},
});
export default Component;
</script>