ES6模板字符串中使用循环并取值

甜甜凉白开

已于 2022-07-25 08:52:31 修改

阅读量3.9k

点赞数 3

分类专栏：前端文章标签： es6

于 2021-09-07 10:50:15 首次发布

本文链接：https://blog.csdn.net/qq_41877050/article/details/120153477

版权

前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

vue项目中碰到需要在模板字符串中动态渲染数组中的每一项，发现v-for不能正常渲染，于是使用原生的js语法来完成。

let tempul=`
    <ul>
	    ${this.mapInfoshowList.map(item=>{
		    let tempid = `${item.id}`
		    return `<li>
                    <i class="el-icon-star-on"></i>
                    &nbsp;${item.name}:&nbsp;${ele[item.id]}
                </li>`
	    }).join('')}
    </ul>`
let content1 = `
    <div class="mymapinfo">
		${tempul}
		<p><i class="el-icon-location"></i>&nbsp;位置:&nbsp;`+ele.weizhi+`</p>
		<div style="border-top:1px dashed #919191;padding-top:8px;
                    color:rgb(64, 158, 255);font-size:12px;width:98%">
			<span onclick='guijihuifang()'>轨迹回放</span>&nbsp;&nbsp;
			<span >车辆追踪</span>&nbsp;&nbsp;
			<span >实时视频</span>&nbsp;&nbsp;
			<span >历史视频</span>&nbsp;&nbsp;
			<span onclick='cymingling()'>常用命令</span>&nbsp;&nbsp;
			<span >查看街景</span>&nbsp;&nbsp;
		</div>
	</div>`

<script>
    const list = [
        {id:1,name:"aaaa"},
        {id:2,name:"bbbb"},
        {id:3,name:"cccc"},
        {id:4,name:"dddd"}
    ]
    let doc = document.getElementById("box");
    // let htmlcontent = `
    //     <ul v-for="${(item,index) in list}" :key="${index}">
    //         <li id="${item.id}">${item.name}</li>
    //     </ul>
    // `
    
    //v-for不能正常渲染,报错如下
    //template.html:26 Uncaught ReferenceError: item is not defined at template.html:26:23
    
    let teplhtml = `<ul>
        ${list.map(item=>{
                return `<li id="${item.id}">${item.name}</li>`
            }).join('')
        }
    </ul>`

    doc.innerHTML = teplhtml

</script>

效果：