vue中的v-for使用v-text设置相应索引（比如汉字索引）

问题描述

需求，给三个卡片的内容上要加上如下所示的索引。我们先看一下效果图：

解决方案有两种：

• 第一种，让后端返回数据的时候，把对应的索引拼接到数据的前面。（不推荐）
• 第二种，前端通过v-text去处理，前端自己加。（推荐）

思路分析

v-text平常好像是下面的这种用法，就是取值常常是从data中取值然后用v-text呈现到页面上去。如下：

// html

// js
data(){
    return {
        msg:"我是v-text指令"
    }
}

这样的话，就会造成一个错觉，v-text好像就只用data里面的数据。其实，v-text也可以使用methods方法，或者computed计算属性。
我们来看一下具体代码：
html部分

js部分（methods写法）
根据接收的索引，返回对应汉字的索引，写在方法里面，直接return对应我们想要呈现的字即可

    numToHanZi1(index){
      // console.log("index1",index);
      if(index == 0){
        return "一、"
      }else if(index == 1){
        return "二、"
      }else if(index == 2){
        return "三、"
      }
    },

js部分（computed写法）
计算属性是要计算的结果，所以需要再return一个箭头函数，用于计算。同时接收参数，需要再箭头函数的形参括号里面接收参数

    numToHanZi1() {
      // 在return的箭头函数里面接收参数
      return (index) => {
        if (index == 0) {
          return "一、";
        } else if (index == 1) {
          return "二、";
        } else if (index == 2) {
          return "三、";
        }
      };
    },

完整代码

总结

其实很简单，就是记住methods中的写法和computed中的写法的区别即可。思路就是这样的，不过具体的问题，再具体分析一下，其实很多地方的methods写法和computed写法大致都是这样的

如果想要研究具体数字转汉字的方法，我推荐一篇文章，挺好
https://www.jb51.net/article/...