有关阵列单击的更多信息,默认情况下在阵列上显示选项1

时间:2018-06-01 19:07:35

标签: javascript html css vue.js

我有一个显示包含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;
        },
    }
})

0 个答案:

没有答案