vue中怎么用正则处理数据后再渲染

Question

拿到几千条数据，要把关键字段加粗。

        <div class="announces">
            <div class="announce" v-for="(item, index) in response" :key="index" >
                <div class="announceTitle">
                    <div class="prev">
                        <div class="star">星星</div>
                        <div class="ITEM_A">{{item.ITEM_A}}</div>
                        <div class="TYPE">{{item.TYPE}}</div>
                        <div class="NOTAM_SERIES">{{item.NOTAM_SERIES}}</div>
                        <div class="NOTAM_CODE">{{item.NOTAM_CODE}}</div>
                        <div class="ITEM_B-ITEM_C">({{item.ITEM_B}}-{{item.ITEM_C}})</div>
                    </div>
                    <div class="next">
                        
                    </div>
                </div>
                <div class="announceContent">
                    <div class="ITEM_D">{{item.ITEM_D}}</div>
                    <div class="ITEM_E">{{item.ITEM_E}}</div>
                    <div class="ITEM_F_LOWER">{{item.ITEM_F_LOWER}}</div>
                    <div class="ITEM_G_UPPER">{{item.ITEM_G_UPPER}}</div>
                    <div class="TXT_NOTES">{{item.TXT_NOTES}}</div>
                </div>
            </div>
        </div>

比如item.ITEM_D里面有几个词需要加粗，有几个字符串需要转为换行，怎么操作？

Answer 1

可以放在computed属性里操作，不复杂的话，就直接在模版里操作，比如添加<br/>。然后使用v-html指令v-hmtl

Answer 2

使用过滤器，匹配到关键字之后再做相应的操作

Answer 3

filter

Answer 4

使用过滤器，可以设置一个或者多个过滤器串联使用