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