vue|给你一个数组，你怎么模拟出A数组的第一个元素，B第二个元素。。。以此类推。 vue|前端小知识

【vue|给你一个数组，你怎么模拟出A数组的第一个元素，B第二个元素。。。以此类推。】choiceoptinfo:["6时30分
", "6时50分
", "6时
"]有这样一个数组。他是一个题目的选项。
我们要写成下面这个图片的样式。字数比较少的时候，一行两列。字数多的时候一行一个。

文章图片

文章图片

首先定义i一个数组ABCDEFG。因为我这里直接就知道他最多时五个，所以我设置的choiceoptinfoIndex:['A','B','C','D','E']

.replace(/<[^<>]+>/g,'').length>20}"v-for="(item,key) inchoiceoptinfo":key="item.tlid"v-html="''+choiceoptinfoIndex.slice(0,choiceoptinfo.length)[key]+'、'+item">

.pt2 .selectoption{width:48%; display: inline-block; position:relative; }
.pt2 .selectoption.selectoption1{width:100%; display: inline-block; }
.pt2 .selectoption em{font-style: normal; position:absolute; top:13px; }
.pt2 .selectoption p{display:inline-block; text-align: left; padding-left:20px}
.pt2 .selectoption.selectoption1 p{width:96%; }
分析一下上面的代码
1/
:class="{'selectoption1':item.replace(/<[^<>]+>/g,'').length>20}"这是个动态的class。里面时item.replace(/<[^<>]+>/g,'')正则当去掉了html标签以后超过20个字符的时候selectoption1为真。就采用.pt2 .selectoption.selectoption1的样式，也就是选项就换行了，一行一个。

2/
v-html="''+choiceoptinfoIndex.slice(0,choiceoptinfo.length)[key]+'、'+item" 这个比较复杂。
解析出来是这样的。

vue|给你一个数组，你怎么模拟出A数组的第一个元素，B第二个元素。。。以此类推。

文章图片
A这个序号有个em标签包着。紧接着就是那个choiceoptinfo里面的数组元素。
choiceoptinfoIndex.slice(0,choiceoptinfo.length)截取长度和choiceoptinfo长度一样的，这样就能一一对应，几个数组前面就是几个英语序号了。

3/
样式的定义也是一个难点，要使用绝对和相对定位。否则可能导致