vue.js使用select切换图片

<div id="app">
    <div class="pic"> 
        <img :src=imgsrc>
    div>

    <select v-model="selected" @change="changeimg(parseInt(selected))"> 
      
        <option value="1">第一张option>
        <option value="2">第二张option>
        <option value="3">第三张option>
    select>
div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            selected:1,  //selected与v-model绑定后,就是value值,数值为几默认选择第几项
            imgsrc:"https://images.pexels.com/photos/762528/pexels-photo-762528.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"
            },
        methods:{
            changeimg:function(sortnum){
                switch(sortnum){
                case 1:this.imgsrc="https://images.pexels.com/photos/762528/pexels-photo-762528.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"
                break;
                case 2:this.imgsrc="https://images.pexels.com/photos/762080/pexels-photo-762080.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"
                break;
                case 3:this.imgsrc="https://images.pexels.com/photos/761070/pexels-photo-761070.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"
                break;
                }
            }
        }
    })
script>

你可能感兴趣的:(vue,JAVASCRIPT)