Vue js切换css类

Posted 2023-02-23

【中文标题】Vue js切换css类

【英文标题】：Vue js switch css class

【发布时间】：2018-04-13 06:17:58

【问题描述】：

我正在使用 vuejs，我想根据数据值切换我的类。 如果它是负数，我想使用 .neg 类，当它是正数时，我想使用 .pos 类。

一切正常，除了添加类。

数据如下所示：5、-7、8、-2、4、-9 等

myArray: function () 
  var test =  [5, -7, 8, -2, 4, -9];
  return test;
,

---

<div v-for="data in myArray">
  <div v-bind:class="'neg': data < 0, 'pos': data > 0"></div>
  <div id="my"> data </div>
</div>

---

.pos background-color: green;
.neg background-color: red;

任何帮助都会被占用。

【问题讨论】：

不应该是data in myArray()吗？另外，我不会继续在循环中重复使用“我的”id。你最终会得到重复

这里似乎可以正常工作~jsfiddle.net/o49x5de0/2。会不会是你的neg / pos 分类元素没有内容？

投票结束作为一个错别字

谢谢菲尔，如果可以的话，我会给你一个赞成票。我的问题是 myArray()。当我改变它时，它起作用了

【参考方案1】：

因为，myArray 正在返回一个值（一个数组）。将myArray 替换为myArray()

<div v-for="data in myArray">
  <div :class="'neg': data < 0, 'pos': data > 0"></div>
  <div id="my"> data </div>
</div