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

50次阅读

共计 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 写法大抵都是这样的

如果想要钻研具体数字转汉字的办法,我举荐一篇文章,挺好
https://www.jb51.net/article/…

正文完
 0