1、前端代码

需要引入：

　　element.min.css

　　vue.min.js

　　element.min.js

　　axios.min.js   nuget里面可添加

<div id="myVue">

　　<el-steps>
　　　　<el-step :title="item.title" :description="item.description" :status="item.status" v-for="item in items">
　　　　　　<template slot="description">
　　　　　　　　<span>计划完成时间：{{item.jhdesc}}<br />实际完成时间：{{item.sjdesc}}</span>
　　　　　　</template>
　　　　</el-step>
　　</el-steps>
</div>

2、Js代码

<script type="text/javascript">
　　function getProInfo() {

　　var id = 0;
　　var re = /^[0-9]*[1-9][0-9]*$/;

　　var str = window.location.href
　　var num = str.substring(str.length - 1, str.length);

　　if (re.test(num)) {
　　　　id = num;

　　　　axios.get('/ProInfo/GetDemoInfo', {
　　　　params: {
　　　　　　　　　　Id: id
　　　　　　　　}
　　　　}).then(function (response)

　　　　 {


　　　　　　vm.items = response.data;
　　　　}).catch(function (error) { // 请求失败处理
　　　　　　document.write(error)
　　　　　　console.log(error);
　　　　});
　　　}

}

var vm = new Vue({
　　el: '#myVue',
　　data: {
　　　　status: 0,
　　　　items: null
　　}
})
getProInfo();
</script>

 

3、后台代码

public JsonResult GetDemoInfo(int Id = 0)
{

　　List<Demo> items=new List<Demo>();

　　//获取数据库数据集合，返回json

　　return Json(items, JsonRequestBehavior.AllowGet);
}

效果展示：