Vue 图片切换

来自姬鸿昌的知识库
跳到导航 跳到搜索

https://www.bilibili.com/video/BV12J411m7MG/?p=14

1.定义图片数组

2.添加图片索引

3.绑定 src 属性

4.图片切换逻辑


5.显示状态切换

<div id="#app">
    <img :src="imgArr[index]">
    <a href="#" @click="prev" v-show="条件">上一张</a>
    <a href="#" @click="next" v-show="条件">下一张</a>
</div>

var app = new Vue({
  el:"#app",
  data:{
    imgArr:[],
    index:0
  },
  methods:{
    prev:function(){},
    next:function(){}
  }
})

完整代码：

<html>
    <head>

    </head>
    <body>
        <div id="mask">
            <div class="center">
                <h2 class="title">
                    <img src="./images/logo.png" alt="">
                    hello world
                </h2>
                
                <!--左箭头-->
                <a href="javascript: void(0)" v-show="index!=0" @click="prev" class="left">
                    <img src="./images/prev.png" alt=""/>
                </a>

                <!-- 图片 -->
                <!--<img src="./images/00.jpg" alt=""/>-->
                <img :src="imgArr[index]" alt=""/>
                
                <!--右箭头-->
                <a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
                    <img src="./images/next.png" alt=""/>
                </a>
            </div>
        </div>

        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#mask",
                data:{
                    imgArr:[
                        "./images/00.jpg",
                        "./images/01.jpg",
                        "./images/02.jpg",
                        "./images/03.jpg",
                        "./images/04.jpg",
                        "./images/05.jpg",
                        "./images/06.jpg",
                        "./images/07.jpg",
                        "./images/08.jpg",
                        "./images/09.jpg",
                        "./images/10.jpg"
                    ],
                    index: 0
                },
                methods: {
                    prev: function(){
                        this.index--;
                    },
                    next:function(){
                        this.index++;
                    }
                }
            })
        </script>

    </body>
</html>
  • 列表数据使用数组保存
  • v-bind 指令可以设置元素属性，比如 src
  • v-show 和 v-if 都可以切换元素的显示状态，频繁切换用 v-show
取自“https://www.jihongchang.top/index.php?title=Vue_图片切换&oldid=7031”