vue 好看的界面控件,vue片全部加载完成后显示页面

需求：点击下方小图时，上方大图转换为相对应小图。

代码实现部分

HTML部分

<div class="goodDetails_name_img">     <div style="width: 300px;height: 300px">            <img :src="ImgUrl" style="width: 100%;height: 100%">     </div>    <div class="little_img" >        <ul v-for="img in imgUrl">            <li @click='getIndex(img.url)'>                <img :src="img.url" style="width: 50px; height: 50px" >            </li>        </ul>    </div></div>

JS部分

export default {    data() {        return {            imgUrl: [                { index:1, url: require('./img/goods1.png') },                { index:2, url: require('./img/goods2.png') },                { index:3, url: require('./img/goods3.png') },                { index:4, url: require('./img/goods4.png') },                { index:5, url: require('./img/goods5.png') },            ],            //大图片默认显示第一张            ImgUrl:require('./img/goods1.png')        }    },    //点击小图片时将图片路径赋值给大图    getIndex(imgUrl){        this.ImgUrl = imgUrl;    }    }};

注：此文章为作者第一次使用vue做电商网站时的小结，如有错误请及时私信作者。希望大家一起学习共同进步！

私有云产品更新k8s使用nfs持久化数据Qiankun JS沙箱是怎么做隔离的