<!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>
JS模板字符串
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
spa頁面，不同組件按需引入js，aliplayer
(function(d, s, id) { let js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) retur