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 而言,这些解决方案并不完美.有的方案不能满足复杂的页面跳转场景,有的方案迁移成本较大,为此我们 ...
随机推荐
- 锋利的jQuery初学（2）
js与jq事件处理程序区别: 1,事件源: document.getElementById('id'); $("#id") 2,事件: document.getElem ...
- new Date().getTime()和System.currentTimeMillis()对比
我在工作中,看项目组的代码时,在代码中会发现一个有趣的现象,有使用new Date().getTime()来获取时间戳的, 也有使用System.currentTimeMillis()来获取时间戳的, ...
- java面试总躲不过的并发（一）： 线程池ThreadPoolExecutor基础梳理
本文核心:线程池ThreadPoolExecutor基础梳理 一.实现多线程的方式 1.继承Thread类,重写其run方法 2.实现Runnable接口,实现run方法 3.实现Callable接口 ...
- js原型链的深度理解!
一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object .Function 是 JS 自带的函数对象.下面举例说明 var o1 = ...
- ansible常用模块入门
常用模块有以下几个 command copy shell crond yum service setup 1.command模块 ansible george -m command -a " ...
- Game Development Patterns and Best Practices (John P. Doran / Matt Casanova 著)
https://github.com/PacktPublishing/Game-Development-Patterns-and-Best-Practices https://github.com/m ...
- 一台电脑支持2个git账号：gitlab+github
一.背景 1.公司使用gitlab保存代码,git已支持. 2.需要新增一个人github账户.创建study项目并提交到github上. 3.git提交时互相不混淆 二.操作流程 1.注册githu ...
- 当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同 (纯CSS)
<!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Prope ...
- 新建git仓库并与github同步
windows系统,GitExtentions. 如果在一个空目录克隆一个github仓库: 1. 在一个空目录下,点击右键,点击Clone 2. 设置: 3. 点击加载SSH密钥.参看 GitExt ...
- 异常：tomcat与windows时间不同步
调试一个项目时发现用户那里服务器的Tomcat命令行中log4j输出的时间与操作系统时间不一致,因此日志记录的时间与操作系统时间也不一致,且正好相差8个小时.产生原因是因为Tomcat中的时区设置与操 ...