大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
vue项目中碰到需要在模板字符串中动态渲染数组中的每一项,发现v-for不能正常渲染,于是使用原生的js语法来完成 。
let tempul=`
<ul>
${this.mapInfoshowList.map(item=>{
let tempid = `${item.id}`
return `<li>
<i class="el-icon-star-on"></i>
${item.name}: ${ele[item.id]}
</li>`
}).join('')}
</ul>`
let content1 = `
<div class="mymapinfo">
${tempul}
<p><i class="el-icon-location"></i> 位置: `+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>
<span >车辆追踪</span>
<span >实时视频</span>
<span >历史视频</span>
<span onclick='cymingling()'>常用命令</span>
<span >查看街景</span>
</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>
效果:
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/171845.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...