vue滚动视图、axios、get、then、catch

1、html 部分

<div id="app"> <div class="roll_box"> <div> <div class="menu_item" v-for="(item,i) in rollView" :key="item.id" v-text="item.title" @click="roll(i)"> el: "#app", data: { rollView: [], content: ['点击标题可以展示对应内容'] }, mounted() { this.getData(); }, methods: { getData() { let that = this; axios.get('../json/jsonData.json').then(response => { that.rollView = response.data.rollView; }).catch(reason => { console.log('出错啦'); }); }, roll(i) { this.content = this.rollView[i].content; } } }); 

3、css 部分

.roll_box { display: flex; justify-content: center; align-items: center; } .menu_item { margin-bottom: 16px; font-weight: 600; cursor: pointer; } .content_box { width: 60%; } .content_box { margin-left: 50px; } 

4、演示