如何在Vuejs For循环中使用字母或罗马数字作为索引？

Posted 2023-02-16

【中文标题】如何在Vuejs For循环中使用字母或罗马数字作为索引？

【英文标题】：How to use alphabets or roman numbers as index in Vuejs For loop?

【发布时间】：2021-05-02 01:30:05

【问题描述】：

vuejs中for循环（v-for）的默认迭代器从0,1,2,3开始... 我们如何设置 v-for 以 i、ii、iii 或 a、b、c 而不是数字开始索引。 例如这是内容：

let content = [
  "Content1",
  "Content2",
  "Content3",
  "Content4",
  "Content5",
  "Content6",
  "Content7",
  "Content8"
]

内容数组包含 100 多个不同产品的项目，所以我不想要 手动添加罗马数字

我希望输出看起来像这样

我。内容1

二。内容2

三。内容3

四。内容4

v.内容5

六。内容6

七。内容7

八。内容8

【问题讨论】：

v-for 枚举数组和对象。数组的索引从 0 开始，对象具有您放入其中的任何键。因此，只需使用 i、ii、iii 或 a、b、c 之类的键创建您的对象 - 就可以了。

@IVOGELOV 我已经做到了，我正在寻找 vuejs 的内置函数。

Vue 是一个框架，而不是一个库。它不会尝试为标记提供库样式的组件。所以答案是否定的，罗马数字没有内置函数。

创建一个用数字填充的数组并对其进行迭代。你可能可以导入一个列表，甚至是一个包，比如roman-numerals

【参考方案1】：

假设内容将在 data() 上

你可以创建一个方法：

toRoman(num, result = '')
    const map = 
        M: 1000,
        CM: 900,
        D: 500,
        CD: 400,
        C: 100,
        XC: 90,
        L: 50,
        XL: 40,
        X: 10,
        IX: 9,
        V: 5,
        IV: 4,
        I: 1,
      ;
      for (const key in map) 
        if (num >= map[key]) 
          if (num !== 0) 
            return this.toRoman(num - map[key], result + key);
          
        
      
      return result;
    ;

并在循环中访问：

<div v-for="(cont, index) in content">
 toRoman(index).toLowerCase(). cont
</div>