使用v-for循环展示多张图片，并且标记选中的图片

    因为项目需求，需要使用v-for展示多张图片，并且供用户选择其中一张，当用户选中一张图片的时候需要改变该图片的样式，来反映用户的选择。由于刚学vue，踩了好多坑，因此作以下记录，以时刻提醒自己：

1.一开始我打算将图片嵌入button中，但是这样存在的问题，由于是用v-for循环列出的一系列button，每一个button的id或者class名字都是一样的，就算能够知道用户点击图片的index，也无法修改该button的样式。(或许还是因为目前自己的积累有限，如果以后知道方法了要及时修改)；

2.经过进一步的百度，发现了一些动态修改dom样式的参考博客如下，因此可以考虑动态修改div的样式来反映用户的选择。

https://blog.csdn.net/u013243347/article/details/81169515

https://www.cnblogs.com/sophie_wang/p/7903905.html

粗略的代码如下：

<template>
    <div class="index" style="padding-top:300px">
        <Row :gutter="16">
            <Col span="4" :key = item v-for="(item,index) in imgList">
                <div ref="btn" @click="handleClick(index)">
                    <Button>
                        <img :src=item.url style="width:200px" /><br>
                        {{index+1}}
                    </Button>  
                </div>
            </Col>
        </Row>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                imgList:[
                    {
                        name: "1",
                        url: "src/images/1.jpg"
                    },
                    {
                        name: "2",
                        url: "src/images/2.jpg"
                    },
                    {
                        name: "1",
                        url: "src/images/1.jpg"
                    },
                    {
                        name: "3",
                        url: "src/images/3.jpg"
                    },
                    {
                        name: "1",
                        url: "src/images/1.jpg"
                    },
                    {
                        name: "3",
                        url: "src/images/3.jpg"
                    },
                    {
                        name: "1",
                        url: "src/images/1.jpg"
                    },
                    {
                        name: "2",
                        url: "src/images/2.jpg"
                    },
                    {
                        name: "1",
                        url: "src/images/1.jpg"
                    },
                    {
                        name: "1",
                        url: "src/images/1.jpg"
                    }
                ]
            }
        },
        methods: {
            handleClick(index){
                // console.log(item);
                console.log(index);
                for(var i=0;i<this.imgList.length;i++){
                    if(i!==index){
                         this.$refs.btn[i].style.background="";
                    }else{
                        this.$refs.btn[i].style.background="blue";
                    }
                }              
            }
        }
    }
</script>

3.这样能够反映用户的选择，但是个人感觉还有更好的办法，以后务必补充！！！