我有一个有关使用mevn堆栈进行电影分级的简单项目 这是我的应用程序外观: myapp 这是图片示例: sample picture
这是我的全部代码:
<template>
<v-timeline>
<v-timeline-item color="indigo lighten-2" fill-dot right v-for="movie in movies" :key="movie._id">
<span class="grey--text" slot="opposite">{{ movie.release_year }} ‧ {{ movie.genre }}</span>
<v-card>
<v-card-title class="indigo lighten-2">
<v-icon dark size="42" class="mr-3">
movie
</v-icon>
<h2 class="display-1 white--text font-weight-light">{{ movie.name }}</h2>
</v-card-title>
<v-container>
<v-layout>
<v-flex xs10>
{{ movie.description }}
</v-flex>
<v-flex xs2>
<v-icon size="64">movie</v-icon>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-timeline-item>
这是我的JavaScript代码:
<script>
import axios from 'axios'
export default {
name: 'Movies',
data () {
return {
movies: [],
show: false
}
},
mounted () {
this.fetchMovies()
},
methods: {
async fetchMovies () {
return axios({
//display all movies
method: 'get',
url: 'http://localhost:8081/movies'
})
.then((response) => {
this.movies = response.data.movies
})
.catch(() => {})
}
}
}
</script>
像我的图片样本一样,如何创建条件以使位置不同