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

33次阅读

共计 2719 个字符，预计需要花费 7 分钟才能阅读完成。

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

解决方案有两种：

第一种，让后端返回数据的时候，把对应的索引拼接到数据的后面。（不举荐）
第二种，前端通过 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 写法大抵都是这样的