给你一个数组,你怎么模拟出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序号的样式并不是在行的上面的最前面的。

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值