相信大家在前端开发过程中经常遇到需要显示章目的情况,例如:
在 Vue 中我们可以用 v-for 处理列表数据显示这样的列表,但是 我们只能通过 Index 获得 [0,1,2,3,4] ,显然我们需要的界面的序号是从1开始的,所以我们就需要将 index+1 可以得到 [1,2,3,4] ,这些 number 型的序号仅对于小节序号使用,那章节的 “一、二、三” 我们又该怎么实现呢?
1.转化成MATH类型的文字
对于一些比较简单的需求,也就是这个课程最多有十章,那就很简单了,我们就用数组把这些 “一、二、三。。。。”存起来,用遍历的index作为数组下标去取就行啦!具体实现代码也就两行:
js
const idxArray = ['一','二','三','四','五','六','七','八','九','十'];
复制代码
html
<div v-for="(item,index) in catalogData">
<span>第{
{idxArray[index]}}章: {
{item.courseChapterTitle}}</span>
</div>
复制代码
这只是最简单的情况,也是局限性最大的情况,如果超过了十章了呢?就会出现undefined,所以我们需要一个可以转化所有小写数字的方法:
js
const numberChinese = (number) => {
var units = '个十百千万@#%亿^&~', chars = '零一二三四五六七八九';
var a = (number + '').split(''), s