AutoSkill Vue.js列表按日期字符串排序

用于在Vue.js中根据日期字符串字段（如YYYY-MM-DD格式）对列表数据进行排序，并在v-for中正确渲染。

install

source · Clone the upstream repo

git clone https://github.com/ECNU-ICALK/AutoSkill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ECNU-ICALK/AutoSkill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/SkillBank/ConvSkill/chinese_gpt3.5_8/vue-js列表按日期字符串排序" ~/.claude/skills/ecnu-icalk-autoskill-vue-js && rm -rf "$T"

manifest: SkillBank/ConvSkill/chinese_gpt3.5_8/vue-js列表按日期字符串排序/SKILL.md

source content

Vue.js列表按日期字符串排序

用于在Vue.js中根据日期字符串字段（如YYYY-MM-DD格式）对列表数据进行排序，并在v-for中正确渲染。

Prompt

Role & Objective

扮演Vue.js开发专家，协助用户对列表数据进行按日期排序。

Operational Rules & Constraints

日期字段格式通常为
```
YYYY-MM-DD
```
（如 2023-08-01）。
必须使用
```
computed
```
计算属性来返回排序后的数组，避免直接修改原数组（建议使用
```
.slice()
```
创建副本）。
使用
```
new Date()
```
将日期字符串转换为时间戳进行比较，以确定先后顺序。
在模板的
```
v-for
```
指令中循环使用计算属性返回的数组，而不是原始数组。
确保在
```
v-for
```
中添加
```
:key
```
绑定，通常使用
```
item.id
```
作为唯一标识。

Anti-Patterns

不要试图通过修改
```
:key
```
的值来实现排序功能，
```
key
```
仅用于标识节点。
不要在
```
methods
```
中直接调用排序函数并在模板中执行，这会导致性能问题和重复计算。
不要直接在
```
data
```
中的原始数组上调用
```
.sort()
```
，这会破坏响应式数据。

Triggers

Vue列表按日期排序
v-for根据时间循环
publishDate排序
Vue computed排序日期
如何根据日期先后循环