views-- car list
<template>
<div>
<Nav></Nav>
<div class="wrap">
<CarTag v-for="car in carsl" :cars="car"></CarTag>
</div>
<!--<h1>汽车页</h1>-->
</div>
</template>
<script>
import Nav from '../components/Nav'
import CarTag from '../components/CarTag'
export default {
name:"Cars",
components:{
Nav,
CarTag
},
created(){
this.carsl =[
{
id:1,
title:'MUSTANG 2019款 2.3T EcoBoost',
content:`在1960 年代中期，英国的汽车杂志《Car》使得“supercar”（超级跑车）这个术语正式进入了现代汽车辞典，
但他们不是最早使用这个词的。《Car》的编辑当初用这个术语来形容名噪一时的兰博基尼Miura，结果也证明这个词相当贴切。
据了解，这个术语最初是诞生于关于老爷车Ensign Six 的一则广告里——那可是在更遥远的1920年代。`,
img:require('../assets/img/001.jpg')
},
{
id:2,
title:'Aventador SVJ Roadster',
content:`在1960 年代中期，英国的汽车杂志《Car》使得“supercar”（超级跑车）这个术语正式进入了现代汽车辞典，
但他们不是最早使用这个词的。《Car》的编辑当初用这个术语来形容名噪一时的兰博基尼Miura，结果也证明这个词相当贴切。
据了解，这个术语最初是诞生于关于老爷车Ensign Six 的一则广告里——那可是在更遥远的1920年代。`,
img:require('../assets/img/002.jpg')
},
{
id:3,
title:'法拉利F8车款',
content:`在1960 年代中期，英国的汽车杂志《Car》使得“supercar”（超级跑车）这个术语正式进入了现代汽车辞典，
但他们不是最早使用这个词的。《Car》的编辑当初用这个术语来形容名噪一时的兰博基尼Miura，结果也证明这个词相当贴切。
据了解，这个术语最初是诞生于关于老爷车Ensign Six 的一则广告里——那可是在更遥远的1920年代。`,
img:require('../assets/img/003.jpg')
},
{
id:4,
title:'前途K50 2018款',
content:`在1960 年代中期，英国的汽车杂志《Car》使得“supercar”（超级跑车）这个术语正式进入了现代汽车辞典，
但他们不是最早使用这个词的。《Car》的编辑当初用这个术语来形容名噪一时的兰博基尼Miura，结果也证明这个词相当贴切。
据了解，这个术语最初是诞生于关于老爷车Ensign Six 的一则广告里——那可是在更遥远的1920年代。`,
img:require('../assets/img/004.jpg')
},
]
}
}
</script>
<style scoped>
.wrap {
width: 800px;
margin: 0 auto;
}
</style>views-- car details
<template>
<div class="box">
<button>返回汽车列表</button>
<button>返回首页</button>
<hr>
<div class="text">
<h1>{{ title }}--详情</h1>
<img :src="imgsrc" alt=""/>
<!--<img :src="../assets/img/001.jpg" alt="">-->
<p>
{{ content }}
</p></div>
</div>
</template>
<script>
export default {
name: "CarDeatail",
data() {
return {
title: 'null',
content:'...',
imgsrc:'../assets/img/001.jpg'
// aa:'../assets/img/001.jpg'
}
},
created() {
this.title = this.$store.state.cars.title;
this.content = this.$store.state.cars.content;
// let a='../assets/img/00'+(this.$store.state.cars.id)+'.jpg';
// console.log(a)
// console.log('../assets'+(this.$store.state.cars.img)) // /img/001.44d7c2c3.jpg
// this.imgsrc = require('../assets'+(this.$store.state.cars.img));
// this.imgsrc = require(a)
}
}
</script>
<style scoped>
.text{
width: 800px;
margin: 0 auto;
}
.text p{
font-size: 16px;
line-height: 40px;
}
</style>