返回json是：
组件中引用：
<template>
<div>
<mt-header fixed title="城市列表">
<mt-button slot="left" ><span>返回</span> </mt-button>
</mt-header>
<ul>
<li class="item" v-for="(item, index) in list" :key="index">
<h2>{{index}}</h2>
<dl v-for="(city, cIndex) in item" :key="cIndex">
<dd class="city">
<h4>{{city.name}}</h4>
</dd>
</dl>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
list: ''
}
},
created(){
this.get();
},
methods:{
get(){
this.$http.get('cities?type=group').then((res)=>{
console.log(res.data);
this.list=res.data;
}).catch(function(err){
console.log(err)
})
}
}
}
</script>
<style scoped>
.item{background:#eee;}
.city{background:#ccc;}
</style>
参考：
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="vue读取城市列表" />
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" href="http://unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
.item{background:#eee;}
.city{background:#ccc;}
</style>
</head>
<body>
<div id="app">
<ul>
<li class="item" v-for="(item, index) in list" :key="index">
<h2>{{index}}</h2>
<dl v-for="(city, cIndex) in item" :key="cIndex">
<dd class="city">
<h4>{{city.name}}</h4>
</dd>
</dl>
</li>
</ul>
</div>
<script>
var Main = {
data() {
return {
list: []
};
},
created () {
this.getData()
},
methods: {
getData() {
$.ajax({
url: 'https://elm.cangdu.org/v1/cities?type=group',
success: (res) => {
console.log(res)
this.list = res
}
})
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</body>
</html>
301
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
