问题形容
需要，给三个卡片的内容上要加上如下所示的索引。咱们先看一下效果图：
解决方案有两种：
- 第一种，让后端返回数据的时候，把对应的索引拼接到数据的后面。（不举荐）
- 第二种，前端通过v-text去解决，前端本人加。（举荐）
思路剖析
v-text平时如同是上面的这种用法，就是取值经常是从data中取值而后用v-text出现到页面下来。如下：
// html<span v-text="msg"></span>// jsdata(){ 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/...