Vue实现HTML模板与Json数据的渲染

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;
        }
    });
}