美文网首页vue技术栈
vue填坑---在vuejs中实现a标签href tel的功能

vue填坑---在vuejs中实现a标签href tel的功能

作者: 翻滚的前端程序员 | 来源:发表于2017-04-10 18:34 被阅读5442次

    1. 场景

    persons: [
        {
            name: 'arron',
            phone: 13811112222
        },{
            name: 'jack',
            phone: 13900088822
        },{
            name: 'steven',
            phone: 13711119909
        }
    ]
    遍历persons,实现tel功能
    

    2. 刚开始的错误想法

    <div v-for="p in persons">
        <p>
            name: {{ p.name }}
        </p>
        <p>
            tel: <a :href="tel: p.phone">call me</a>
        </p>
    </div>
    
    这时候发现这种写法根本无法实现tel的功能
    

    3. 正确做法,拼接字符串

    <div v-for="p in persons">
        <p>
            name: {{ p.name }}
        </p>
        <p>
            tel: <a :href="'tel:' + p.phone">call me</a>
        </p>
    </div>
    

    OK! Demo

    相关文章

      网友评论

        本文标题:vue填坑---在vuejs中实现a标签href tel的功能

        本文链接:https://www.haomeiwen.com/subject/aqheattx.html