vue学习09 图片切换
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 图片切换的更多相关文章
- Android应用开发学习之图片切换器
作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz 如果我们要实现类似Windows的照片查看器切换上一张下一张照片的效果,可以使用图片切换器ImageSwitcher ...
- Vue学习之组件切换及父子组件小结（八）
一.组件切换: 1.v-if与v-else方式: <!DOCTYPE html> <html lang="en"> <head> <met ...
- CSS学习------之简单图片切换
最近一直在重温纯CSS,学习的时候真的才发现,css真的博大精深啊! 所以趁着学习的劲头,谢了个最简单的CSS图片切换! 先整理下思路: 首先我希望图片居中间,两边有个切换按钮,点击按钮的时候,可以实 ...
- AntDesign vue学习笔记（七）Form 读写与图片上传
AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...
- Android学习笔记 ImageSwitcher图片切换组件的使用
activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...
- HTML中动态图片切换JQuery实现
相信很多同学都注意到了,各大新闻或者娱乐网站都含有动态图片切换,那个漂亮的感觉让刚刚学习html的人,都非常好奇和心动.那下面就让我们看一下到底如何实现动态图片切换呢?看一下百度贴吧的效果图吧~ // ...
- vue学习心得
前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- day 81 Vue学习一之vue初识
Vue学习一之vue初识 本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...
随机推荐
- 如何在Linux上使用xargs命令
大家好,我是良许. 在使用 Linux 时,你是否遇到过需要将一些命令串在一起,但是其中一个命令不接受管道输入的情况呢?在这种情况下,我们就可以使用 xargs 命令.xargs 可以将一个命令的输出 ...
- MapReduce 的 shuffle 过程中经历了几次 sort ？
shuffle 是从map产生输出到reduce的消化输入的整个过程. 排序贯穿于Map任务和Reduce任务,是MapReduce非常重要的一环,排序操作属于MapReduce计算框架的默认行为,不 ...
- 喵的Unity游戏开发之路 - 在球体上行走
很多童鞋没有系统的Unity3D游戏开发基础,也不知道从何开始学.为此我们精选了一套国外优秀的Unity3D游戏开发教程,翻译整理后放送给大家,教您从零开始一步一步掌握Unity3D游戏开发. 本文不 ...
- filebeat 启动失败
最近在ELK架构中启动filebeat时,启动失败,检查启动节点不存在 查看/var/log/message中报错日志,有如下内容 filebeat: Exiting:error loading co ...
- 【Go语言探险】线上奇怪日志问题的排查
最近在日志中发现一些奇怪的日志,大致长这样: Error 2020-08-28 06:59:38.813+00:00 ... _msg=get immersion context, fetch tra ...
- WPF 使用WindowChrome自定义窗体 保留原生窗体特性
本文大幅度借鉴dino.c大佬的文章 https://www.cnblogs.com/dino623/p/uielements_of_window.html https://www.cnblogs.c ...
- Labview学习之路（七）for和while的理论要点
for循环 循环次数可以为0(N的接线端为) 终止条件:1. 完成N次循环. 2. 添加条件接线端,就像while循环的红点一样,(方法,右键点击边框,添加条件接线端) 数组通过自动索引接入 ...
- 一键部署k8s
本人学习安装kubernetes时,顺便整理了安装脚本,可以通过执行一个脚本,自动二进制安装好1台master+2台node的k8环境.方便需要学习k8s的同学. 百度网盘:https://pan.b ...
- Mysql业务设计（物理设计）
物理设计 根据所选择的关系型数据库的特点对逻辑模型进行存储结构的设计 物理设计: 定义数据库.表及字段的命名规范 选择合适的存储引擎 为表中的字段选择合适的数据类型 建立数据库结构 定义数据库.表及字 ...
- Linux平台Zabbix Agent的安装配置
这里简单总结一下Linux平台Zabbix Agent的安装配置,实验测试的Zabbix版本比较老了(Zabbix 3.0.9),不过版本虽然有点老旧,但是新旧版本的安装步骤.流程基本差别不大.这里的 ...