关于javascript:vue中的vfor使用vtext设置相应索引比如汉字索引

问题形容

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

解决方案有两种：

• 第一种，让后端返回数据的时候，把对应的索引拼接到数据的后面。（不举荐）
• 第二种，前端通过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/…