如何使用 Vue.js 和 Tailwind 根据数组中的元素有条件地将多个类添加到 <span> 中？

Question

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

\n

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

\n

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

\n

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

\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

\n

这可以使用 v-bind:class 和 Vue 数组语法来完成吗？

\n

Answer 1

类可以与指令共存:class，因此在渲染时它将合并这两个类。尝试这个：

<span 
  class="py-1 px-3 rounded-full text-xs" 
  :class="{ 'text-green-600 bg-green-200': park.status == 'Pending', 'bg-purple-200 text-purple-600': park.status == 'Visited'}"
>
  {{park.status}}
</span>