因为后台重新建表怕麻烦，让前端直接写死，不需要调接口返回。
于是我打算在data里模拟一段数据出来，这样利于代码的维护，使代码更加精简。
因为数据量比较庞大，我并没打算直接写在data里，而是新建新的js，然后导出文件--思路就是这样
首先我新建了list.js文件
然后通过export const list 导出
list.png
但是因为模拟数据中有图片路径，如果写相对路径的话，肯定会提示路径不对的
于是我将需要的图片先进行导出
导出的图片比较多，我选择再新建shop_img.js文件
export img1 from './image9/zj-1.jpg'
export img2 from './image9/zj-2.jpg'
export img3 from './image9/zj-3.jpg'
export img4 from './image9/zj-4.jpg'
export img5 from './image9/zj-5.jpg'
export img6 from './image9/zj-6.jpg'
export img7 from './image9/zj-7.jpg'
export img8 from './image9/zj-8.jpg'
这样在写上相对路径就没有问题了
接下来在list.js进行引入
import * as myImg from './shop_img.js'
export const list = {
...
}
做完这些基本就可以完成了
接下来就是在app.vue里导入数据
import {list} from './list'
export default {
data () {
return {
list: list
}
}
最后我们通过v-for='item in list'就完成了模拟数据的思路
