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

choiceoptinfo:["<p>6时30分</p>", "<p>6时50分</p>", "<p>6时</p>"]  有这样一个数组。他是一个题目的选项。

我们要写成下面这个图片的样式。字数比较少的时候，一行两列。字数多的时候一行一个。

 

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

<div class="pt2" >
            <div  class="selectoption" :class="{'selectoption1':item.replace(/<[^<>]+>/g,'').length>20}"  v-for="(item,key) in  choiceoptinfo"  :key="item.tlid"  v-html="'<em>'+choiceoptinfoIndex.slice(0,choiceoptinfo.length)[key]+'、</em>'+item"></div>
         </div>
 

.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="'<em>'+choiceoptinfoIndex.slice(0,choiceoptinfo.length)[key]+'、</em>'+item" 这个比较复杂。

解析出来是这样的。A这个序号有个em标签包着。紧接着就是那个choiceoptinfo里面的数组元素。

choiceoptinfoIndex.slice(0,choiceoptinfo.length)截取长度和choiceoptinfo长度一样的，这样就能一一对应，几个数组前面就是几个英语序号了。

 

3/

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

像这种的c序号的样式并不是在行的上面的最前面的。