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. Shell编程—sed和gawk

    1文本处理 1.1sed 编辑器 sed编辑器被称作流编辑器(stream editor),和普通的交互式文本编辑器恰好相反.在交互式文本编辑器中(比如vim),你可以用键盘命令来交互式地插入.删除或 ...

  2. Maven通解

      参考博文:通俗理解maven 该篇文章篇幅很长,大概的思路如下 maven的介绍,初步认识,获取jar包的三个关键属性 --> 介绍仓库(获取的jar包从何而来)-->用命令行管理ma ...

  3. 曹工改bug：cpu狂飙，old gc频繁，线程神秘死亡连环案件调查报告

    曹工改bug:cpu狂飙,old gc频繁,线程神秘死亡连环案件调查报告 前言 前两天,访问开发环境上一个java服务,发现一直转圈圈,因为我开着fiddler,可以看到的现象是,接口一直没返回:本来 ...

  4. 百度支持链接的nofollow属性吗

    http://www.wocaoseo.com/thread-269-1-1.html 简单明确的一个问题,百度目前支持链接的nofollow属性吗?rel='external nofollow' 复 ...

  5. VUE+ElementUI创建项目

    1.官网下载node,安装node.js环境 安装完成后进入cmd,输入node -v和npm -v查看node和npm是否安装成功及对应的版本 2.全局安装vue-cli:cnpm install ...

  6. Less 预处理笔记

    1. less 简介 1. less是CSS的预编译器,可以扩展CSS语言(当然也兼容CSS),可以定义变量.混合.函数等等,让CSS代码更易维护和扩展 2. less与传统写法相比: less后缀为 ...

  7. vue cli3如何引入全局less变量

    最近在项目中需要写一个全局的style.less,然后在各组件中可以直接调用: 1.在assets下创建一个less文件: 2.安装style-resources-loader (npm i styl ...

  8. android开发之java代码中字符串对比忽略大小写。java程序员必回，可用来比对验证码等问题

    比如:字符串a与字符串B对比,只需调用 a.equalsIgnoreCase(B);即可.很简单的一个方法.忽略大小写.

  9. Vue.js学习（八）—— 树形结构下拉框组件vue-treeselect

    vue-treeselect是一个多选组件,具有对Vue.js的嵌套选项支持. 具有嵌套选项支持的单个和多个选择 模糊匹配 异步搜索 延迟加载(仅在需要时加载深层选项的数据) 键盘支持(使用Arrow ...

  10. android studio配置so和assets目录

    so配置: 1. 建立src/main/libs/armeabi目录,so文件放入armeabi目录 2.配置build.gradle android { defaultConfig{ XXXXXX ...