前端方面的下拉菜单配合图片问题

有没有人会那种，上面是一张图片，下面是一个下拉菜单，选择菜单内不同的选项，上面的图片对应改变

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<img src='https://tse4-mm.cn.bing.net/th/id/OIP-C.F42nB-pEoV-wj4BrehcQtwAAAA?w=204&h=204&c=7&r=0&o=5&pid=1.7' id='img' />
    <div>
    <select id='select'>
        <option label='图片1' value='https://tse4-mm.cn.bing.net/th/id/OIP-C.F42nB-pEoV-wj4BrehcQtwAAAA?w=204&h=204&c=7&r=0&o=5&pid=1.7' />
        <option label='图片2' value='https://p.qqan.com/up/2020-3/2020031619533643793.jpg' />
    </select>
    </div>    
</body>
    
    <script>
        let $img = document.getElementById('img')
        let $select = document.getElementById('select')
        
        $select.onchange = function(e) {
            $img.src = $select.value
            console.log( $select.value)
        }
    </script>
</html>

这不简简单单吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue实现</title>
    <script src="./vue.js"></script>
    <style>
        img{
            width: 400px;
        }
    </style>
</head>
<body>
    <div id="app">
        <img v-bind:src="imgs[index]" alt="">
        <select v-model="index" @click="fun(index)">
            <option value="0" selected>小哆啦</option>
            <option value="1">皮卡丘</option>
        </select>
    </div>
</body>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                imgs:[
                    'https://img2.baidu.com/it/u=2646980528,89365558&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=502',
                    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fbb6a8c44-d57c-49ca-b30c-737c397002bd%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695279729&t=8105dc1b6ff7cfcb2c2048cd9956eb9e'
                ],
                index: 0
            },
            methods:{
                fun:function(index){
                    this.index = index;
                }
            }
        });
    </script>
</html>

vue实现，运行结果：

img