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>

解析出來是這樣的。A這個序號有個em標籤包著。緊接著就是那個choiceoptinfo裡面的陣列元素。

choiceoptinfoIndex.slice(0,choiceoptinfo.length)擷取長度和choiceoptinfo長度一樣的，這樣就能一一對應，幾個陣列前面就是幾個英語序號了。

3/

樣式的定義也是一個難點，要使用絕對和相對定位。否則可能導致

像這種的c序號的樣式並不是在行的上面的最前面的。