首页 > Web开发 > 详细

vue 渲染html标签/js 正则替换

时间:2019-08-28 17:00:04      阅读:209      评论:0      收藏:0      [点我收藏+]

物流信息列表内嵌电话标签的渲染:

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

vue 渲染html标签/js 正则替换

原文:https://www.cnblogs.com/binglan/p/11424987.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!