如何测试 x-for 变量中的值并根据值更改 CSS 样式？

Question

如何测试 x-for 变量的值，然后满足 IF 条件以更改 CSS 值？

<template x-for="item in myForData" :key="item">
        <div id="jh-stats-neutral" class="flex items-center shadow hover:bg-indigo-100 
        hover:shadow-lg hover:rounded transition duration-150 ease-in-out transform 
        hover:scale-102 flex flex-col justify-center px-2 py-3 mt-0 bg-white border
        border-gray-300 rounded md:mb-0"                     
          <div class="text-md">
            <p
              class="text-md font-semibold text-center text-red-600 *<% if ("item.categoria.substring(3)" == 'Rec') { %> bg-blue-200 <% } %>*"
              x-text="item.categoria"
            ></p>
            <p
              class="text-lg text-center text-red-700"
              x-text="item.total"
            ></p>
          </div>
        </div>
       </template>

有人可以帮助我吗？

Answer 1

我想回答你的问题 - 很遗憾我无法添加评论 - 请提供更多详细信息 - 你到底想做什么。

首先，x-for = "item in myForData" 不是变量而是属性

Answer 2

您可以使用 x-bind:class 或 :class 来绑定到 class 属性。

x-bind:class 具有特殊的语法，这意味着您可以向其传递一个对象，该对象的键是 class(es)，值是是否应用了 class(es)。

例如。 x-bind:class="{ 'hello': false, 'world': true }" 将添加 world class 但不会添加 hello.

在您的情况下，您可以使用 Alpine 进行 class 切换：

*<% if ("item.categoria.substring(3)" == 'Rec') { %> bg-blue-200 <% } %>*变成class="...otherclasses" x-bind:class="{ 'bg-blue-200': item.categoria.substring(3) === 'Rec' }".

您的完整代码更新为 x-bind:class

<template x-for="item in myForData" :key="item">
  <div id="jh-stats-neutral" class="flex items-center shadow hover:bg-indigo-100 
  hover:shadow-lg hover:rounded transition duration-150 ease-in-out transform 
  hover:scale-102 flex flex-col justify-center px-2 py-3 mt-0 bg-white border
  border-gray-300 rounded md:mb-0"                     
    <div class="text-md">
      <p
        class="text-md font-semibold text-center text-red-600 *<% if ("item.categoria.substring(3)" == 'Rec') { %> bg-blue-200 <% } %>*"
        x-bind:class="{ 'bg-blue-200': item.categoria.substring(3) === 'Rec' }"
        x-text="item.categoria"
      ></p>
      <p
        class="text-lg text-center text-red-700"
        x-text="item.total"
      ></p>
    </div>
  </div>
</template>

Answer 3

神奇的雨果！你的解释让我对一个充满可能性的世界敞开心扉......我在上面的原始代码中留下了一些垃圾，但这是我的代码更新：

      <template x-for="item in myForData" :key="item">
        <div id="jh-stats-neutral" class="flex items-center shadow hover:bg-indigo-100 
        hover:shadow-lg hover:rounded transition duration-150 ease-in-out transform 
        hover:scale-102 flex flex-col justify-center px-2 py-3 mt-0 bg-white border
        border-gray-300 rounded md:mb-0"                     
          <div class="text-md">
            <p
              class="card text-md font-semibold text-center"
              x-bind:class="{ 'text-blue-600': item.total.substring(0,4) !== 'R$ -' , 'text-red-600': item.total.substring(0,4) === 'R$ -' }"
              x-text="item.conta"
            ></p>
            <p
              class="value text-lg text-center text-gray-700"
              x-text="item.total"
            ></p>
          </div>
        </div>
      </template>

再次感谢，让你知道我是你的粉丝！

如何测试 x-for 变量中的值并根据值更改 CSS 样式？

How to test value in x-for variable and change the CSS Style according to the value?

javascript

alpine.js