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 ...
随机推荐
- openvswitch常用bond相关命令
1.列出bondovs-appctl bond/list[root@test~]# ovs-appctl bond/listbond type recircID slavesbond1 balance ...
- 基于 abp vNext 微服务开发的敏捷应用构建平台 - 文章目录
系列文章: <基于 abp vNext 微服务开发的敏捷应用构建平台 - 设计构想> [点击查看] <基于 abp vNext 微服务开发的敏捷应用构建平台 - 文章目录> [ ...
- Shell编程—结构化命令
1使用if-then语句 f-then语句有如下格式. if command then commands fi bash shell的if语句会运行if后面的那个命令.如果该命令的退出状态码是0(该命 ...
- Hive 常见面试题(一)
面试题: hive 内部表和外部表的区别? hive 是如何实现分区的? Hive 有哪些方式保存元数据,各有哪些优缺点? hive中order by.distribute by.sort by和cl ...
- Bellman-Ford算法 例题：P3371 单源最短路径
看到还没人用Bellman-Ford过,赶紧水一发 lz非常弱,求各位大佬轻喷qwq 洛谷题目传送门:P3371 0."松弛"操作 如果存在一条边\((u,v)\)通过中继的方式可 ...
- 【Go语言探险】线上奇怪日志问题的排查
最近在日志中发现一些奇怪的日志,大致长这样: Error 2020-08-28 06:59:38.813+00:00 ... _msg=get immersion context, fetch tra ...
- Java中解析wav音频文件信息：音频声道数，采样频率，采样位数、声音尺寸
前言:请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i 音频解析方法: public static int toInt(byte[] b) { return ((b[3] << 2 ...
- py_正则表达式练习
正则表达式: #正则表达式 #键盘数字6上的符号,^表示行的开始,$ 表示行的结束 #test = "tm queal Tomorrow Moon" ''' ^tm #匹配tm开头 ...
- 日志记录——logging模块
Logging:日志记录是为了跟踪记录软件运行时,发生的事件,包括出错,提示信息等等.log日志级别:日志级别大小关系为:CRITICAL > ERROR > WARNING > I ...
- Python采集CSDN博客排行榜数据
文章目录 前言 网络爬虫 搜索引擎 爬虫应用 谨防违法 爬虫实战 网页分析 编写代码 运行效果 反爬技术 前言 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知 ...