vue 渲染html標簽/js 正則替換

物流信息列表內嵌電話標簽的渲染：

vue1.x 可以用 {{{ }}}，vue2.x 用 v-html，以下為解決方案：

        <ul class="wuliu">
            <li :class="{'current':index==0}" v-for="(item,index) in traces">
                <div class="text" >
                    <p v-html="tel(item.AcceptStation)"></p>
                    <time>{{item.AcceptTime}}</time>
                </div>
            </li>
        </ul>

//  js
 methods:{
    getDeliveryInfo:function(){//物流信息
        axios.get('/api/particulars.rm',{
            params:{'orderId':orderId},
            headers:{'token':sessionStorage.getItem("token")}
        }).then(  response => {
                      console.log(response);
                      if(response.data.code==100){
                          this.traces=response.data.object.logisticsInfo.Traces.reverse();
                      }else{
                          my_alert(response.data.info);
                      }
                      }
        )
          .catch(function (error) { // 請求失敗處理
            console.log(error);
         }); 
    },
    tel:function(value){ return value.replace(/1[3456789]\d{9}/g,function(str1){ return '<a href=\'tel:'+str1+'\'>'+str1+'</a>'; }); }
      
 },

注：經測試 v-html 內可以調用方法，但不能用通道過濾。

以上所用：

v-html參考：https://www.cnblogs.com/superlizhao/p/8466532.html

正則 參考：https://blog.csdn.net/qq_38047742/article/details/83055370