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

Posted 2023-03-07

【中文标题】如何使用 Vue.js 和 Tailwind 基于数组中的元素有条件地将多个类添加到 <span>？

【英文标题】：How do I conditionally add multiple classes to a <span> based on an element within an array using Vue.js and Tailwind?

【发布时间】：2021-07-29 01:50:47

【问题描述】：

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

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

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

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

如果 status = "Pending" —> 应用类 bg-purple-200 和 text-purple-600 如果 status = "Visited" —> 应用类 bg-green-200 和 text-green-600

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

【参考方案1】：

在以下链接中，您将找到 2 种方法来获得灵活且易读的内容。 https://***.com/a/67382023/8816585

如果在组件中使用，我发现我的更灵活。

我的想法是根据实际状态/道具传递一些类

<button
  class="flex items-center w-auto p-4 text-center ..."
  :class="[
    callToAction.types[color][variant],
     'opacity-50 cursor-not-allowed shadow-none': disabled ,
  ]"
>

【参考方案2】：

class 可以与: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>