js模拟实现vue中的胡子语法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <section>
        <div class="songlist"></div>
    </section>
    <script type="text/template" id="tpl">
        <div>
            <span>你好</span>
            <span>{{name}}<span>
        </div>
    </script>
    <script>
        let name = 'xinxin'
        // 引入外部的数据pageData,渲染到页面上
        // let html = pageData.songlist.map(song => {
        //     let result = tpl.replace('{{name}}', name)
        //     return result
        // }).join('')
        let tpl = document.getElementById('tpl').innerHTML
        let html = tpl.replace('{{name}}', name)   
        document.querySelector('.songlist').innerHTML = html
    </script>

</body>

</html>
posted @ 2022-04-22 18:02  黑蛋的博客  阅读(83)  评论(0编辑  收藏  举报