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

【问题标题】：How to use alphabets or roman numbers as index in Vuejs For loop?如何在Vuejs For循环中使用字母或罗马数字作为索引？
【发布时间】：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

标签： vue.js for-loop vuejs2 vue-component v-for

【解决方案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>

【讨论】：