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. SpringBoot整合Redis并完成工具类

    SpringBoot整合Redis的资料很多,但是我只需要整合完成后,可以操作Redis就可以了,所以不需要配合缓存相关的注解使用(如@Cacheable),而且我的系统框架用的日志是log4j,不是 ...

  2. js实现将时分秒转化成毫秒，将秒转化成时分秒

    // 时间转为毫秒 timeToSec(time) { var hour = time.split('[0] var min = time.split('[1] var sec = time.spli ...

  3. 怎么给Ubuntu Server安装GUI桌面

    sudo apt update sudo apt upgrade sudo add-apt-repository universe sudo add-apt-repository multiverse ...

  4. 基于 GitBook 搭建个人博客

    目录 基于 GitBook 搭建个人博客 1.为什么要写博客? 2.为什么选择使用 GitBook 来搭建? 3.搭建方式 3.1 GitBook 线上直接搭建 3.2 由基于Node.js的命令工具 ...

  5. 焦大：以后seo排名核心是用户需求点的挖掘

    http://www.wocaoseo.com/thread-61-1-1.html 给我一个用户需求点,我便能拗动任何seo排名.-焦大 前不久我看博客上有人留言咨询能否做seo这个词的排名,对于这 ...

  6. 什么类型网站不利于seo优化

    http://www.wocaoseo.com/thread-3-1-1.html     什么样的网站不利于优化?如何让别人找到你的产品或者服务?很多人以为只要做个网站放在网上就行,但是后来发现,网 ...

  7. C++入门记-大纲

    缘来 由于某个不可告人的目标以及想趁着还有精力的年龄,开始了C++学习之路.C++ 诞生很多年了,但依然具有强大的生命力. 我们来看下2020年8月TIOBE 8 月编程语言排行榜. 可以看到C以及C ...

  8. SSD-Tensorflow 512x512 训练配置

    搞了几天终于把这个给搞得差不多了,遇到的错误这里也记录一下: 一.配置[配置什么的300和512其实差不多,这里只举一个例子来分析一下] 之前的文件修改什么的和300x300的一样:https://w ...

  9. 深入理解 IoC、DI

    本文转载自博客:https://www.cnblogs.com/xinhuaxuan/p/6132372.html 1.控制反转:谁控制谁?控制什么?为何叫反转(对应于正向)?哪些方面反转了?为何需要 ...

  10. KMP记录

    例题:luogu P3375 [模板]KMP字符串匹配 知识点:1.KMP模板,熟悉KMP 2.理解KMP过程:失配时,是从后缀转向前缀.即失配时,匹配串是从尾转到头继续匹配,被匹配串不改变. 3.注 ...