Vue实现HTML模板与Json数据的渲染
2、html模板文件<div id="numberOfAlarms" class="leftSide-block"><ul id="numberOfAlarms-list" class="leftSide-ul"><li class="fi
·
2、html模板文件
<div id="numberOfAlarms" class="leftSide-block">
<ul id="numberOfAlarms-list" class="leftSide-ul">
<li class="first">
<span><i class="fa fa-tint"></i></span>
<span>昨日报警数量</span>
<br>
<span class="d-value">{{numberOfAlarms.attributes.ZRnumOfAlarms.num}} </span>
<span class="d-value">个</span>
</li>
<li>
<span><i class="fa fa-tags"></i></span>
<span>今日报警数量</span>
<br>
<span class="d-value">{{numberOfAlarms.attributes.JRnumOfAlarms.num}} </span>
<span class="d-value">个</span>
</li>
</ul>
</div>
2、staticIOT.json数据包
"numberOfAlarms": {
"name": "报警数量",
"attributes": {
"ZRnumOfAlarms": {
"name": "昨日报警数量",
"num": 2021
},
"JRnumOfAlarms": {
"name": "今日报警数量",
"num": 854,
}
}
}
3、HTML文件
<section class="sidebar" id="sidebar-left"></section>
<script src="../Build/vue/vue.js"></script>
JS文件
$('#sidebar-left').load("./templates/IOTsidebarLeft.html", function () {
vmIOTsidebarLeftFun();
});
function vmIOTsidebarLeftFun() {
$.ajax({
url: "./data/staticIOT.json",
success: function (result) {
var vmIOTsidebarLeft = new Vue({
el: '#numberOfAlarms',
data: result
});
window.vmIOTsidebarLeft = vmIOTsidebarLeft;
}
});
}
更多推荐
已为社区贡献4条内容
所有评论(0)