您的位置:首页 > 编程学习 > > 正文

vue图片切换软件(Vue实现简单图片切换效果)

更多 时间:2021-10-24 10:56:28 类别:编程学习 浏览量:2570

vue图片切换软件

Vue实现简单图片切换效果

本文实例为大家分享了Vue实现简单图片切换的具体代码,供大家参考,具体内容如下

vue图片切换软件(Vue实现简单图片切换效果)

代码:

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <title>图片切换</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #app{
               position: absolute;
               width: 100px;
               height: 100px;
               top: 100px;
               left: 400px;
            }
    
           #left{
               position: relative;
               top:-240px;
               left: -45px;
               font-size: 50px;
           }
    
           #right{
               position: relative;
               top: -300px;
               left: 595px;
               font-size: 50px;
           }
    
           a{
               color: black;
               text-decoration: none;
           }
        </style>
    </head>
    <body>
        <li id="app">
            <!-- 要轮询的图片 -->
          <img :src="imgArr[index]"/>
          <!-- 左箭头 -->
          <a href="javascript:void(0)" id="left" @click="prev" v-show="index!=0">《</a>
          <!-- 右箭头 -->
          <a href="javascript:void(0)" id="right" @click="next" v-show="index<imgArr.length-1">》</a>
        </li>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    imgArr:[
                        "img/1.jpg" alt="vue图片切换软件(Vue实现简单图片切换效果)" border="0" />
    
  • 总结:

    • 列表数据使用数组保存;
    • v-bind指令可以设置元素属性,如src
    • v-showv-if都可以切换元素的显示状态,但频繁切换推荐使用v-show

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:vue 图片切换
    您可能感兴趣