Vue自学笔记(4)图片切换

图片切换:

1.列表数据使用数组保存
2.v-bind指令可以设置元素属性,比如src
3.v-show和v-if都可以切换元素的显示状态,频繁切换用v-show

<body>
    <div id="app">
       <img :src="imgArr[index]" alt="">
       <a href="javascript:void(0)" @click="prev" v-show="index!=0" class="left">
             <img src="左.png" alt="">
       </a>

       <a href="javascript:void(0)" @click="next" v-show="index<imgArr.length-1" class="right">
        <img src="右.png" alt="">
  </a>
     
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
               imgArr:[
                  "00.jpg",
                  "01.jpg",
                  "02.jpg",
                  "03.jpg",
                  "04.jpg",
               ],
               index :0
            },
            methods: {

                prev:function(){
                    this.index--;
                },
                next:function(){
                    this.index++;
                }
                    



                }
            


        })
    </script>
</body>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容