查看“Vue 图片切换”的源代码

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

1.定义图片数组

2.添加图片索引

3.绑定 src 属性

4.图片切换逻辑



5.显示状态切换<syntaxhighlight lang="html">
<div id="#app">
    <img :src="imgArr[index]">
    <a href="#" @click="prev" v-show="条件">上一张</a>
    <a href="#" @click="next" v-show="条件">下一张</a>
</div>
</syntaxhighlight><syntaxhighlight lang="javascript">
var app = new Vue({
  el:"#app",
  data:{
    imgArr:[],
    index:0
  },
  methods:{
    prev:function(){},
    next:function(){}
  }
})
</syntaxhighlight>完整代码：<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

* 列表数据使用<u>数组</u>保存
* <u>v-bind</u> 指令可以设置元素属性，<u>比如 src</u>
* <u>v-show</u> 和 <u>v-if</u> 都可以切换元素的显示状态，频繁切换用 <u>v-show</u>