我有一个显示包含3个位置的div的方法。当我点击另一个div中的位置(例如苏格兰)时,它会显示苏格兰的信息,然后当我点击欧洲时,它会切换到Europe e.t.c。
在显示更多信息的Div上,我可以在页面加载时默认显示某个位置吗?我希望欧洲默认显示。
<div id="location-box"><!-- Root element for your Vue app -->
<div v-for="location in locations" class="location-box" v-bind:style="{ background: 'linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 1) ),url(' + location.img + ')' }" @click="moreinfo2(location)">
<h4>Visit {{location.name}}</h4>
<p>{{location.desc}}</p>
</div>
</div>
const app = new Vue({
el: '#test',
data: {
moreinfo: false,
locations: [
{
name: "Europe",
desc: "Phasellus non pulvinar elit. Etiam id fringilla eros. Mauris mi odio, fringilla eget tempus eu, vehicula nec neque.",
img: "img/europe.jpg",
moreinfo: [
{
desc: "Euro desc",
header: "Welcome to Europe"
}
]
},
{
name: "America",
desc: "Curabitur vel lacus ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris ex ante, scelerisque vitae semper ut",
img: "https://images.fineartamerica.com/images-medium-large-5/14-american-flag-les-cunliffe.jpg",
moreinfo: [
{desc: "America desc",
header: "Welcome to America"}
]
},
{
name: "Scotland",
desc: "Phasellus non pulvinar elit. Etiam id fringilla eros. Mauris mi odio, fringilla eget tempus eu, vehicula nec neque.",
img: "https://images-na.ssl-images-amazon.com/images/I/41VvuLQ7UhL.jpg",
moreinfo: [
{desc: "Scotland desc",
header: "Welcome to Scotland"}
]
},
],
selected: location[1],
},
methods:{
moreinfo2(location) {
this.selected = location;
},
}
})