JS模板字符串

最新推荐文章于 2024-07-31 14:11:01 发布

Pima

最新推荐文章于 2024-07-31 14:11:01 发布

阅读量3.1k

点赞数 2

分类专栏： js 文章标签：字符串模板模板渲染 tempalte.js模板渲染

本文链接：https://blog.csdn.net/gimamy/article/details/89405217

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/template_js/0.7.1-1/template.min.js"></script>
</head>
<body>
    
    <div class="content"></div>

</body>
</html>
<script>

    var data = {
        items:[
        {id:1,name:'小米',status:'1'},
        {id:2,name:'小明',status:'2'},
        {id:3,name:'小红'},
        {id:4,name:'小黄'},
        {id:5,name:'小按'}
    ]
    }
    console.log(data.items.length);
    var str = ''
    var str1 = ''
    for(var i = 0;i < data.items.length; i++){
        //根据某个状态值来判断,适用于多种状态值
       if(data.items[i].status == 1){
       str += `
       <li style='color:red'>
           <span>` +data.items[i].id+ `</span>
           <span>` +data.items[i].name+ `</span>
       </li>
       `
       } else if (data.items[i].status == 2) {
       str += `
       <li style='color:yellow'>
           <span>` +data.items[i].id+ `</span>
           <span>` +data.items[i].name+ `</span>
       </li>
       `
       } else {
       str += `
       <li style='color:skyblue'>
           <span>` +data.items[i].id+ `</span>
           <span>` +data.items[i].name+ `</span>
       </li>
       `
       }

        //根据某个状态值来判断,适用于两种状态值
        str1 += `
        <li `+( data.items[i].status=='1' ? 'style=color:yellow' : 'style=color:red' )+`>
            <span>` +data.items[i].id+ `</span>
            <span>` +data.items[i].name+ `</span>
        </li>
        `    
    }
    
    $('.content').append(str)
</script>

Pima

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS模板字符串

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫

专栏目录