首先,在DIV里面定义 id 或者 class 一般用id,唯一性的。
1.一般情况用户打开页面的时候,模板默认用 foreach 已经遍历了初始数据
<ul id="huawei">
{foreach name='data_list' id='vo'}
<li>
头像:<img src={$vo.image}>
姓名:<span>{$vo.name}</span>
年纪:<strong>{$vo.age}</strong>
<li>
{/foreach}
</ul
2.如果用户点击侧边栏,切换不同的内容,那么ajax返回的数据就需要用jq进行替换
这里ajax就不写了,直接看接口return的数据。
//ajax请求成功,接受返回的数据,json类型。我这边返回的是二维数组
success: function (ret) {
//先定义变量,用来存储内容
var html = '';
//for循环开始遍历, ret.data.length 表示结束的二维数组的长度,就是有几条数据。
for (var i = 0; i < ret.data.length; i++){
//+= 表示循环拼接,
html += `<li>
//data[i] 这个 i 是键,比如: $data[0]
<img src="${ret.data[i].image}" alt="">
<span>${ret.data[i].name}</span>
<strong>${ret.data[i].age}</strong>
</li>`;
}
//将遍历的内容,赋值到 id名字叫 pc_item 的元素里面
$('#pc_item').html(html);
}