vue.js使用select切换图片

最新推荐文章于 2024-11-08 22:21:56 发布

闻大师

最新推荐文章于 2024-11-08 22:21:56 发布

阅读量2.8k

点赞数

分类专栏： vue JAVASCRIPT 文章标签： select 图片切换 option

本文链接：https://blog.csdn.net/qq_33325959/article/details/78973767

版权

JAVASCRIPT 同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

<div id="app">
    <div class="pic"> 
        <img :src=imgsrc>
    </div>
<!--<button @click="changeimg(1)">第1张</button><button @click="changeimg(2)">第2张</button>    option则无法添加事件-->
    <select v-model="selected" @change="changeimg(parseInt(selected))"> 
      <!--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>