首页 > 其他分享> 文章详细

使用 .net MVC+Vue.js 实现 el-steps

2022-01-15 22:00:51 阅读：102 来源： 互联网

标签：el Vue min items js str var id

1、前端代码

需要引入：

　　element.min.css

　　vue.min.js

　　element.min.js

　　axios.min.js nuget里面可添加

　　<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代码

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

效果展示：

标签：el,Vue,min,items,js,str,var,id
来源： https://www.cnblogs.com/hyf69/p/15808237.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用 .net MVC+Vue.js 实现 el-steps