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 而言,这些解决方案并不完美.有的方案不能满足复杂的页面跳转场景,有的方案迁移成本较大,为此我们 ...
随机推荐
- UVa 712
这个题根本不用建树,因为是完全二叉树,可以把这个想成二进制.对于根是二进制数的首位,之后依次类推.到最后的叶子节点就是从0到pow(2,n)-1. 关键在于在第一次输入的不是按照x1,x2,x3,x4 ...
- UVa 297 四分树
感觉特别像那个分治的日程表问题.是f的话就填,否则就不填,然后同一个表填两次.那么就是最后的结果. #include <iostream> #include <cstring> ...
- 微信小程序之点击列表的item带参数跳转界面
1.在js文件里写个界面跳转的事件处理函数gotableinfo,var index = parseInt(e.currentTarget.dataset.index); 为获取当前点击列表的下脚标, ...
- css的各种动画
/*淡入*/@keyframes fade-in { 0% { opacity: 0; } /*初始状态 透明度为0*/ 40% { opacity: 0; } /*过渡状态 透明度为0*/ 100% ...
- 光照构建失败。Swarm启动失败
这是别人(http://blog.csdn.net/z609932088/article/details/52368015)写的,亲试可用 如下图 百度许久,有大神指出是我在编译源码的的时候没有将其中 ...
- 那些年,很多人没看懂的Python内置函数
Python之所以特别的简单就是因为有很多的内置函数是在你的程序"运行之前"就已经帮你运行好了,所以,可以用这个的特性简化很多的步骤.这也是让Python语言变得特别的简单的原因之 ...
- 单线拨号上网时RouterOS内网端口映射的配置
很多时候routeros 是通过单线拨号上网,假设PPP接口名为pppoe-out1 若需要添加内网ip=18.16.1.92主机的3389端口映射 ,可以在命令行键入: ip firewall na ...
- oracle 中update多个字段
update A set (A.a2,A.a3) =(select B.b2,b.b3 from B where B.b1= A.a1 and A.a3=100 )
- 深入理解JavaScript事件循环机制
前言 众所周知,JavaScript 是一门单线程语言,虽然在 html5 中提出了 Web-Worker ,但这并未改变 JavaScript 是单线程这一核心.可看HTML规范中的这段话: To ...
- js通過name获取input框输入值
var account = $("input[name='account']").val();//获取input框输入值