vue简单的导航栏
<style>
img{
display:block;
margin:0 auto;
width:500px;
height:500px;
}
#app li{
list-style: none;
} </style>
<body>
<div id="app"> <img :src="img" @click="autoCg()"> <!--显示一张图片，并给图片添加点击事件-->
<ul>
<li v-for="(item,index) in json"></li>
</ul>
<button @click="prev">上一张</button>
<button @click="next">下一张</button>
</div>
</body>
<script> new Vue({
el:'#app',
data:{
img:'./images/cao.jpg',
json:[
"./images/cao.jpg",
"./images/hua.jpg",
"./images/ning.jpg",
"./images/shu.jpg",
],
index:0
},
methods:{
next(){
this.img = this.json[this.index++];
if(this.index > 3){
this.index = 0; //当超过图片数量，返回第一张图片
}
},
prev(){
this.img = this.json[this.index--];
if(this.index < 0){
this.index = 3;
}
//当index值<0时，返回最后一张图片
},
//点击首张图片触发函数功能
autoCg(){
let self = this;
//定时器，每2秒换一张图片
setInterval(function(){
self.img = self.json [self.index++];
if(self.index > 3){
self.index = 0;
}
},2000);
} }, })
</script>
vue简单的导航栏的更多相关文章
- 用jquery制作一个简单的导航栏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Vue 实现左边导航栏且右边显示具体内容（element-ui）
最终效果图: 现在开始进入正题: 1.安装element-ui npm i element-ui -S CDN 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引 ...
- iOS史上最简单修改导航栏分隔线颜色方法!!!
override func viewDidLoad() { super.viewDidLoad() if let imageView = self.findNavLineView(view: navi ...
- css制作简单的导航栏
//css代码 #menu{ height: 65px; width:100%; background-color: rgba(0, 0, 0, 0.5);}#menu ul{ list-style: ...
- vue实现侧边导航栏
<div class="sidebar"> <el-menu class="sidebar-el-menu" :default-active= ...
- js 实现弹性运动的简单应用----导航栏中弹性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 我的Vue之旅、05 导航栏、登录、注册 (Mobile)
第一期 · 使用 Vue 3.1 + TypeScript + Router + Tailwind.css 构建手机底部导航栏.仿B站的登录.注册页面. 代码仓库 alicepolice/Vue-05 ...
- [知了堂学习笔记]_css3特效第二篇--行走的线条&&置顶导航栏
一.行走的线条. 效果图(加载可能会慢一点儿,请稍等...): html代码: <div class="movingLines"> <img src=" ...
- iOS系统中导航栏的转场解决方案与最佳实践
背景 目前,开源社区和业界内已经存在一些 iOS 导航栏转场的解决方案,但对于历史包袱沉重的美团 App 而言,这些解决方案并不完美.有的方案不能满足复杂的页面跳转场景,有的方案迁移成本较大,为此我们 ...
随机推荐
- 搭建opencv javaweb项目
搭建opencv javaweb项目 用到的技术maven.git.ssm.opencv.javaweb 搭建opencv javaweb项目时,踩了很多坑:怀疑过spring,想过python,最后 ...
- Vue源码之目录结构
Vue版本:2.6.9 源码结构图 ├─ .circleci // 包含CircleCI持续集成/持续部署工具的配置文件 ├─ .github // 项目相关的说明文档,上面的说明文档就在此文件夹 ├ ...
- kylin cubing algorithm（算法）
看到这一块的视频,结合光方博客的一些文档及自己的一点理解,记个笔记,以备不时之需. by layer cubing 1.on MR 这个算法的对cube的计算就像它的名字一样是按player进行的. ...
- day05-数据类型与操作
- day02代码
1.while.....else.....语句,break,continue,if,while,用户交互,输出,运算符 # 用户有三次登录机会 _username = 'tom' _password ...
- git代理配置
命令行模式下配置 git config --global https.proxy https://proxyuser:proxypassword@ip/域名:port git config --glo ...
- Java...点点点语法
https://blog.csdn.net/IT_faquir/article/details/49131173
- eclipse+gradle
一.gradle 下载与安装 下载地址:http://services.gradle.org/distributions/ 下载后,放到:D:\gradle-4.6 在系统环境变量path,中加:D: ...
- Spark分布式编程之全局变量专题【共享变量】
转载自:http://www.aboutyun.com/thread-19652-1-1.html 问题导读 1.spark共享变量的作用是什么?2.什么情况下使用共享变量?3.如何在程序中使用共享变 ...
- WebApi Owin OAuth
Microsoft.Owin.Host.SystemWeb Owin Microsoft.Owin Microsoft.Owin.Diagnostics Owin Micros ...