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. 下拉菜单，下拉导航，JavaScript，html，jQuery的实现代码

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  2. Typora--我用过的最好用的markdown编辑器

    Typora Markdown编辑器,让人专注于书写的编辑器,书写博客和笔记的不二之选! 之前使用过程中只是使用了默认的功能,没有进行任何的第三发查件使用,各种方面出现了很多的局限性,比如插入了图片之 ...

  3. oracle练习前期准备

    oracle练习前期准备 登陆scott用户(默认密码tiger),开始一般提示用户已锁. 解决办法:登陆sys或system用户解锁 输入命令alter user scott account unl ...

  4. vue混入mixins时注意的问题

    mixin.js - 方式一:导出对象 const mixin = { mounted () { console.log('fffffffffffff') }, methods: { } } expo ...

  5. Alink漫谈(二十) ：卡方检验源码解析

    Alink漫谈(二十) :卡方检验源码解析 目录 Alink漫谈(二十) :卡方检验源码解析 0x00 摘要 0x01 背景概念 1.1 假设检验 1.2 H0和H1是什么? 1.3 P值 (P-va ...

  6. [ASP.NET Core开发实战]基础篇02 依赖注入

    ASP.NET Core的底层机制之一是依赖注入(DI)设计模式,因此要好好掌握依赖注入的用法. 什么是依赖注入 我们看一下下面的例子: public class MyDependency { pub ...

  7. php 循环里面套sql怎么解决

    功能要求: 企业列表(展示企业的基本信息,这里只获取了名称.logo.和服务类型), 服务类型说明: 服务类型一共3级,1.2级是必填的,3级是非必填,如果填的话最多3个, 服务类型1.2.3保存在一 ...

  8. Oracle RAC与DG

    RAC RAC: real application clustersrac RAC: real application clustersrac 单节点数据库:数据文件和示例文件一一对应 实例损坏时数据 ...

  9. 基于PHP实现CMS识别

    最近正在开发一款基于PHP实现的Web安全检测平台,写到了CMS识别这一功能,便写一篇文章总结一下. 首先需要梳理的是CMS识别的几种方法: 1.网页源代码特征:例如源代码中包含CMS的名称或是某种特 ...

  10. 开发者的福音，LR.NET模块化代码生成器

    代码生成器,是快速开发平台的核心功能之一,是一种用来帮助缺乏经验或者时间的开发者快速生成规范代码的工具,可以在极大程度上提升开发者的工作效率, 能有效避免重复工作.但稍有经验的开发者都明白,代码生成器 ...