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

问题描述

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

解决方案有两种：

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

思路分析

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

// html
<span v-text="msg"></span>
// js
data(){
    return {
        msg:"我是v-text指令"
    }
}

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

<template>
  <div id="app">
    <div class="card" v-for="(item, index) in cardArr" :key="index">
      <!-- 定义一个方法numToHanZi1，将对应的索引传递过去，通过索引返回对应的汉字索引即可 -->
      <div class="top"><span v-text="numToHanZi1(index)"></span>{{ item.Title }}</div>
      <div class="bottom">
        <div class="bottomContent" v-for="(item2, index2) in item.nameArr" :key="index2">
           <!-- 这个也同理 -->
           <span v-text="numToHanZi2(index2)"></span> {{ item2 }}
        </div>
      </div>
    </div>
  </div>
</template>

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 "三、";
        }
      };
    },

完整代码

<template>
  <div id="app">
    <div class="card" v-for="(item, index) in cardArr" :key="index">
      <!-- 定义一个方法numToHanZi1，将对应的索引传递过去，通过索引返回对应的汉字索引即可 -->
      <div class="top"><span v-text="numToHanZi1(index)"></span>{{ item.Title }}</div>
      <div class="bottom">
        <div class="bottomContent" v-for="(item2, index2) in item.nameArr" :key="index2">
          <!-- 这个也同理 -->
          <span v-text="numToHanZi2(index2)"></span> {{ item2 }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cardArr: [
        {
          Title: "前端开发",
          nameArr: ["孙悟空", "猪八戒", "沙和尚"],
        },
        {
          Title: "后端开发",
          nameArr: ["宋江", "李逵", "卢俊义"],
        },
        {
          Title: "测试",
          nameArr: ["林黛玉", "贾宝玉", "薛宝钗"],
        },
      ],
    };
  },
  computed: {
    // numToHanZi1() {
    //   // 在return的箭头函数里面接收参数
    //   return (index) => {
    //     if (index == 0) {
    //       return "一、";
    //     } else if (index == 1) {
    //       return "二、";
    //     } else if (index == 2) {
    //       return "三、";
    //     }
    //   };
    // },
  },
  methods: {
    numToHanZi1(index){
      // console.log("index1",index);
      if(index == 0){
        return "一、"
      }else if(index == 1){
        return "二、"
      }else if(index == 2){
        return "三、"
      }
    },
    numToHanZi2(index) {
      // console.log("index2",index);
      if (index == 0) {
        return "1.1";
      } else if (index == 1) {
        return "1.2";
      } else if (index == 2) {
        return "1.3";
      }
    },
  },
};
</script>

<style lang="less" scoped>
#app {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 50px;
  display: flex;
  .card {
    box-sizing: border-box;
    padding: 25px;
    width: 300px;
    height: 300px;
    border: 1px solid #e9e9e9;
    margin-right: 50px;
    .top {
      width: 100%;
      height: 25px;
      font-style: normal;
      font-weight: 600;
      font-size: 24px;
      line-height: 25px;
    }
    .bottom {
      width: 100%;
      height: calc(100% -25px);
      .bottomContent {
        margin-top: 25px;
      }
    }
  }
}
</style>

总结

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

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