Vue+MUI使用Axios异步加载列表

加载列表"/>

Vue+MUI使用Axios异步加载列表

//JS

<script>new Vue({el: '#app',data: {sites: ""},mounted() {//加载数据this.LoadData();},methods: {LoadData() {//axios请求axios.get("/Data/Values/GetList").then(response => {//在前台渲染时要看清渲染到前台的字段名首字母的大小写this.sites = response.data;}).catch(function (error) { // 请求失败处理console.log(error);});// resource ajax加载//this.$http.get("/Data/Values/GetList").then(function (res) {//    console.log(res.data);//    this.sites = res.data;//    },//    function () {//        console.log('请求失败处理');//    });         },//点击事件OK(obj) {console.log(obj.Name);}}})
</script>

HTML

 <div id="app" v-cloak><div class="mui-navbar-inner mui-bar mui-bar-nav"><button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left"><span class="mui-icon mui-icon-left-nav"></span></button><h1 class="mui-center mui-title">系统管理</h1><span class="mui-icon mui-icon-home"></span></div><ul class="mui-table-view" style="margin-top:45px;"><li class="mui-table-view-cell mui-media" v-for="site in sites" @click="OK(site)"><a href="javascript:;"><img class="mui-media-object mui-pull-left" src="../img/logo.png"><div class="mui-media-body">{{site.Name}}<p class='mui-ellipsis'>{{site.ID}}</p></div></a></li></ul></div>