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 而言,这些解决方案并不完美.有的方案不能满足复杂的页面跳转场景,有的方案迁移成本较大,为此我们 ...
随机推荐
- SimpleDateFormat将月/日/年 时分秒转换为年-月-日 时:分:秒
String expirTime = ”12 / 27 / 2018 12: 00: 00 AM”;SimpleDateFormat in = new SimpleDateFormat("M ...
- 1.YAF 的安装
1.环境 UBUNTU16.04 PHP7.0 2.安装 2.1先安装PHPIZE sudo apt install php7.0-dev 2.2 A;下载源码包 并解压 安装 sudo w ...
- Spark SQL External DataSource简介
随着Spark1.2的发布,Spark SQL开始正式支持外部数据源.这使得Spark SQL支持了更多的类型数据源,如json, parquet, avro, csv格式.只要我们愿意,我们可以开发 ...
- 锋利的jQuery初学（4）
css选择器与jQuery选择器 css选择器 符号 说明 用法 #id 选择器 #id{} .class 类选择器 .class{} Element 标签选择器 p{} , 并集选择器 div,p{ ...
- JavaScript基础之对象属性的检测和枚举
属性检测 对象作为属性的集合,属性又包括自有属性和继承属性: 检测方法: \__ in运算符: \__ var obj = { x:1 } console.log( 'toString' in o ...
- Android DrawerLayout侧滑菜单
本教程已经录制视频,欢迎大家观看我在CSDN学院录制的课程:http://edu.csdn.net/lecturer/944
- eclipse的基本使用和配置
在workspace中src目录下的文件是java文件,bin目录下是class文件 1:基本使用 A:创建Java项目: 点击File或者在最左侧空白处,选择Java项目,在界面中写一个项目名称,然 ...
- JavaScript原型(第五天)
避免对象重复使用,有时候js中会用到原型 function Person(){ name="test"; age=123; } var car={ price=10000; } P ...
- 【python】闭包
一.闭包满足的条件 闭包 = 内部函数 + 定义函数的环境 条件一 : 内部函数 条件二: 外部环境的变量 二.实战 def outer(): x = 10 y = 20 def inner(): p ...
- 思科模拟器-使用vlan划分子网
此博客为初始化版本,未经完善,后续我再整理一下 小技巧:有时候我们不小心执行了一条错误命令,可以尝试使用在该命令前加一个no进行撤销 首先说一下网络设备的选择 在该实验中我主要用到一台三层交换机(思科 ...