es6模板字符串的好处有哪些_使用es6方式实现伪数组转数组

es6模板字符串的好处有哪些_使用es6方式实现伪数组转数组vue项目中碰到需要在模板字符串中动态渲染数组中的每一项,发现v-for不能正常渲染,于是使用原生的js语法来完成。

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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>
                    &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>

效果:

es6模板字符串的好处有哪些_使用es6方式实现伪数组转数组

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/171845.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号