Vue js：使用 v-if 和 v-else 语句更改 CSS

Posted 2023-02-22

【中文标题】Vue js：使用 v-if 和 v-else 语句更改 CSS

【英文标题】：Vue js: change CSS with v-if and v-else statment

【发布时间】：2022-01-23 18:19:59

【问题描述】：

在我的 Vue JS 项目中，我想显示来自 API 的数据并且它运​​行良好，我唯一的问题是当我在我的代码中显示下面的 flat.status 时，我想使用 CSS 例如：if status==Available let text颜色为绿色，当 status==Sold 时让文本颜色为红色等..

有办法吗？

<b-th v-for="(flat, index) in Building.flats" :key="index" >
               <p> flat.status </p>
</b-th>

【参考方案1】：

是的！您可以通过几种方式做到这一点，但最简单的就是使用条件样式标签。在:style，随便写代码！

<p :style=flat.status === 'available' ? 'color: green;' : 'color: 'red'> flat.status </p>

如果您想要更多的 CSS 控制，只需使用条件类。

<p :class="flat.status === 'available' ? 'text-green' : 'text-red'> flat.status </p>

<style>
.text-green 
  // CSS here

</style>

您可以查看其他class binding styles 以获取更多信息。他们还会为您提供其他方法来完成所有这些工作。

对于多个类（我提供的链接中的类似示例）：

<div :class=" 'text-green': flat.available, 'text-red': flat.sold, 'text-yellow': flat.booked "> flat.name </div>

【讨论】：

我知道这应该可以正常工作，但是如果他们有两个以上的状态怎么办？如果我们在部署后添加更多状态怎么办？如果设计师需要改变颜色怎么办？我建议在他们的后端添加一个新的参数颜色

谢谢，但我有 3 个状态：D 可用：绿色，已售：红色和黄色预订......有没有办法做到这一点？

是的！您可以在我提供的关于类和样式绑定的链接中找到，但我还在答案中添加了一个示例。

@sara97 很高兴能帮上忙！希望您继续使用和享受 Vue，如果需要，请务必发布更多问题！