问题

在做前端的时候遇到一个需求，也就是需要将一长串字符串切分成一个数组，然后显示不同类型的标签，最后变成这样一个效果（我用的是vue+element_ui）

原来标签的字符串如下：WD|西部数据|硬盘

思考

​ 因为这个时候数据类型都是数组，类型为一个标签，标签文本为一个值，但是v-for中不能进行两个循环，所以核实后需要使用一个循环将两个值都得到,这时候可以在v-for中使用一个js函数，然后在js函数中返回一个数组。

解决方案

<div class="tag-group">
<el-tag
    v-for="(tag) in myMethod(item.tags.split('|').slice(0,3),types)"
    :type=tag[1]
>
  {{  tag[0]  }}
</el-tag>
</div>	

mythod:

public myMethod(tags:any,types:any){
    var c = tags.map(function(e: any, i: number) {
        return [e, types[i]];
    });
    return c
}

method中的方法实现如下:

var a = [1, 2, 3]
var b = [a, b, c]

method(a,b)=>

[[1, a], [2, b], [3, c]]

当然，这其实不是一种非常好的实现方式，应该在后端中就将数据修改为正确格式。