vue学习09 图片切换

定义图片数组:imgList:[]，列表数据使用数组保存

添加图片索引:index

绑定src属性:使用v-bind，v-bind指令可以设置元素属性，比如src

图片切换逻辑:按下按钮++

切换显示状态：使用v-show，v-show和v-if都可以切换元素的显示状态，频繁切换用v-show

练习代码为：

html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>图片切换</title>

    <link rel="stylesheet" href="css/index.css">

</head>

<body>

    <div id="mask">

        <div class="center">

            <h2 class="title"><img src="https://pic.cnblogs.com/avatar/1369308/20180722204252.png" width="16" height="16"alt="">小飞的壁纸库</h2>

            <img :src="imgList[index]" alt="">

            <a href="javascript:void(0)"

                @click="prev"

                class="left"

                v-show = "index>0">

                <img src="data:images/prev.png" alt="">

            </a>

            <a href="javascript:void(0)"

                @click="next"

                class="right"

                v-show = "index<imgList.length-1">

            <img src="data:images/next.png" alt="">

            </a>

        </div>

    </div>

    <script src="js/vue.js"></script>

    <script>

        var app = new Vue({

            el:"#mask",

            data:{

                imgList:[

                    "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(){

                    this.index--;

                },

                next(){

                    this.index++;

                }

            }

        });

    </script>

</body>

</html>

css:

* {

  margin: 0;

  padding: 0;

}

html,

body,

#mask {

  width: 100%;

  height: 100%;

}

#mask {

  background-color: #c9c9c9;

  position: relative;

}

#mask .center {

  position: absolute;

  background-color: #fff;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  padding: 10px;

}

#mask .center .title {

  position: absolute;

  display: flex;

  align-items: center;

  height: 56px;

  top: -61px;

  left: 0;

  padding: 5px;

  padding-left: 10px;

  padding-bottom: 0;

  color: rgba(175, 47, 47, 0.8);

  font-size: 26px;

  font-weight: normal;

  background-color: white;

  padding-right: 50px;

  z-index: 2;

}

#mask .center .title img {

  height: 40px;

  margin-right: 10px;

}

#mask .center .title::before {

  content: "";

  position: absolute;

  width: 0;

  height: 0;

  border: 65px solid;

  border-color: transparent transparent white;

  top: -65px;

  right: -65px;

  z-index: 1;

}

#mask .center > img {

  display: block;

  width: 700px;

  height: 458px;

}

#mask .center a {

  text-decoration: none;

  width: 45px;

  height: 100px;

  position: absolute;

  top: 179px;

  vertical-align: middle;

  opacity: 0.5;

}

#mask .center a :hover {

  opacity: 0.8;

}

#mask .center .left {

  left: 15px;

  text-align: left;

  padding-right: 10px;

  border-top-right-radius: 10px;

  border-bottom-right-radius: 10px;

}

#mask .center .right {

  right: 15px;

  text-align: right;

  padding-left: 10px;

  border-top-left-radius: 10px;

  border-bottom-left-radius: 10px;

}

运行效果为：

vue学习09 图片切换的更多相关文章

  1. Android应用开发学习之图片切换器

    作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz 如果我们要实现类似Windows的照片查看器切换上一张下一张照片的效果,可以使用图片切换器ImageSwitcher ...

  2. Vue学习之组件切换及父子组件小结（八）

    一.组件切换: 1.v-if与v-else方式: <!DOCTYPE html> <html lang="en"> <head> <met ...

  3. CSS学习------之简单图片切换

    最近一直在重温纯CSS,学习的时候真的才发现,css真的博大精深啊! 所以趁着学习的劲头,谢了个最简单的CSS图片切换! 先整理下思路: 首先我希望图片居中间,两边有个切换按钮,点击按钮的时候,可以实 ...

  4. AntDesign vue学习笔记（七）Form 读写与图片上传

    AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...

  5. Android学习笔记 ImageSwitcher图片切换组件的使用

    activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...

  6. HTML中动态图片切换JQuery实现

    相信很多同学都注意到了,各大新闻或者娱乐网站都含有动态图片切换,那个漂亮的感觉让刚刚学习html的人,都非常好奇和心动.那下面就让我们看一下到底如何实现动态图片切换呢?看一下百度贴吧的效果图吧~ // ...

  7. vue学习心得

    前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...

  8. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  9. day 81 Vue学习一之vue初识

      Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...

随机推荐

  1. linux下显示dd命令的进度

    sudo dd if=/dev/zero of=/tmp/zero.img status=progresslinux下显示dd命令的进度:dd if=/dev/zero of=/tmp/zero.im ...

  2. 初识ABP vNext（6）：vue+ABP实现国际化

    Tips:本篇已加入系列文章阅读目录,可点击查看更多相关文章. 目录 前言 开始 语言选项 语言切换 注意 最后 前言 上一篇介绍了ABP扩展实体,并且在前端部分新增了身份认证管理和租户管理的菜单,在 ...

  3. Docker 镜像构建之 docker commit

    我们可以通过公共仓库拉取镜像使用,但是,有些时候公共仓库拉取的镜像并不符合我们的需求.尽管已经从繁琐的部署工作中解放出来,但是实际开发时,我们可能希望镜像包含整个项目的完整环境,在其他机器上拉取打包完 ...

  4. JAVA指令集——GETSTATIC

    (indexbyte1<<8)|indexbyte2——得到index 1,从runtimeconstantpool中取得index处的FieldRef,FieldRef已经解析完成 Fi ...

  5. Cacti1.2.14最新版安装和配置（详细版）

    Cacti的起源与发展现状 故事要从2001年的某一天说起.一个叫Ian Berry的中学生还在学习如何使用PHP和MySQL进行编程及功能的实现,那时候他业余时间为一个名不见经传的互联网运营商开发项 ...

  6. SplashImage

    关于Unity启动时间过长(启动黑屏时间长)的问题 https://blog.csdn.net/h5q8n2e7/article/details/50484458 Unity3D游戏开发之“重写Uni ...

  7. python笔记-标准库unittest

    unittest核心工作原理 unittest中最核心的四个概念是:test case, test suite, test runner, test fixture. 一个TestCase的实例就是一 ...

  8. pyqt 设置QTabWidget标签页不可选

    pyqt 设置QTabWidget标签页不可选 for i in range(1,7): self.tabWidget.setTabEnabled(i,False)i-对应标签页的位数

  9. nginx模块化结构

    NGINX是一个免费.开源.高性能.轻量级的HTTP和反向代理服务器,也是一个电子邮件(IMAP/POP3)代理服务器 特点: 占有内存少,并发能力强 Nginx的优点: 模块化.事件驱动.异步.非阻 ...

  10. ubuntu nodejs+npm 前端环境部署

    起因 安装node.js / npm (npm:6.9.0 / nodejs:v10.21.0) 软连接的添加和删除 node.js 介绍 Node.js是一个Javascript运行环境(runti ...