小编per*_*ein的帖子

我的 js 文件中有一个数组，其中列出了所有国家公园以及访问状态。

var parksList = new Vue({\n  el: "#parks",\n  data: {\n    parks: [\n      { name: "Acadia", state: "Maine", status: "Pending" },\n      { name: "American Samoa", state: "American Samoa", status: "Pending" },\n      { name: "Arches", state: "Utah", status: "Visited" },\n      ...\n

根据状态文本（“待处理”与“已访问”），我想有条件地将两个顺风类应用于以下跨度。

<span class="py-1 px-3 rounded-full text-xs">{{park.status}}</span>\n

\n
• 如果status = "Pending" \xe2\x80\x94> 应用类bg-purple-200和\n text-purple-600
\n
• 如果status = "Visited" \xe2\x80\x94> 应用类bg-green-200和text-green-600
\n

这可以使用 v-bind:class 和 …