“Vue 图片切换”的版本间的差异

来自姬鸿昌的知识库
跳到导航 跳到搜索
 
（未显示同一用户的5个中间版本）
第5行： 第5行：
 
2.添加图片索引
 
2.添加图片索引
  
−
3.绑定 src 属性<syntaxhighlight lang="html">
+
3.绑定 src 属性
 +
 
 +
4.图片切换逻辑
 +
 
 +
 
 +
 
 +
5.显示状态切换<syntaxhighlight lang="html">
 
<div id="#app">
 
<div id="#app">
 
     <img :src="imgArr[index]">
 
     <img :src="imgArr[index]">
−
     <a href="#">上一张</a>
+
     <a href="#" @click="prev" v-show="条件">上一张</a>
−
     <a href="#">下一张</a>
+
     <a href="#" @click="next" v-show="条件">下一张</a>
 
</div>
 
</div>
 
</syntaxhighlight><syntaxhighlight lang="javascript">
 
</syntaxhighlight><syntaxhighlight lang="javascript">
第17行： 第23行：
 
     imgArr:[],
 
     imgArr:[],
 
     index:0
 
     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>
 
</syntaxhighlight>
 +
 +
* 列表数据使用<u>数组</u>保存
 +
* <u>v-bind</u> 指令可以设置元素属性，<u>比如 src</u>
 +
* <u>v-show</u> 和 <u>v-if</u> 都可以切换元素的显示状态，频繁切换用 <u>v-show</u>

2023年8月8日 (二) 03:41的最新版本

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”