vue换一换功能原型
<html>
<meta charset="utf-8">
<head>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul v-show="flag==1">
<li v-for="item in lists.slice(0,3)">{{item.name}}</li>
</ul>
<ul v-show="flag==2">
<li v-for="item in lists.slice(3,7)">{{item.name}}</li>
</ul>
<ul v-show="flag==3">
<li v-for="item in lists.slice(7)">{{item.name}}</li>
</ul>
<button v-on:click="changeflag">换一换</button>
</div>
</body>
<script>
new Vue({
el:'#app',
data(){
return{
flag:1,
count:1,
lists:[
{name:"push()"},
{name:"pop()"},
{name:"shift()"},
{name:"unshift()"},
{name:"splice()"},
{name:"sort()"},
{name:"reverse()"},
{name:"shift()"},
{name:"unshift()"},
{name:"splice()"},
{name:"sort()"},
{name:"reverse()"},
]
}
},
methods:{
changeflag(){
this.count++;
if(this.count>3){
this.count=1;
}
this.flag=this.count;
}
}
})
</script>
</html>
vue换一换功能原型的更多相关文章
- Unity里的人物驱动/换装备/换武器/换衣服/卡通重定位（转）
Unity里的人物驱动/换装备/换武器/换衣服/动画重定位 刚学的过程被这个问题困扰最多. 首先,基本的,大家都知道驱动人物需要骨架.绑骨的Mesh和动画(这三个要是不知道的话就得考虑看看计算机图形学 ...
- 今天抠图，Python实现一键换底片！想换什么换什么（附源码）
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 生活中我们会拍很多的证件照,有的要求红底,有的是白底,有的是蓝底,今天不通 ...
- [转]搬瓦工换机房换ip之后不能连外网
搬瓦工换机房换ip之后不能连外网 时间 2015-07-21 15:17:16 Wendal随笔 原文 http://wendal.net/2015/07/21.html 主题 iptables ...
- jq验证码换一换
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...
- CI 结合 vue.js 的搜索功能模块
CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...
- excel导出功能原型
本篇博客是记录自己实现的excel导出功能原型,下面我将简单介绍本原型: 这是我自制的窗体,有一个ListView和一个Button(导出)控件. 这是我在网上找到了使用exel需要引用的库. usi ...
- 一周一个小demo — vue.js实现备忘录功能
这个vue实现备忘录的功能demo是K在github上找到的,K觉得这是一个用来对vue.js入门的一个非常简单的demo,所以拿在这里共享一下. (尊重他人劳动成果,从小事做起~ demo原git ...
- 示例vue 的keep-alive缓存功能的实现
本篇文章主要介绍了vue 的keep-alive缓存功能的实现,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Vue 实现组件信息的缓存 当我们 ...
- [转]***换机房换ip之后不能连外网
***换机房换ip之后不能连外网 时间 2015-07-21 15:17:16 Wendal随笔 原文 http://wendal.net/2015/07/21.html 主题 iptables ...
随机推荐
- 13、OpenCV Python canny边缘提取
__author__ = "WSX" import cv2 as cv import numpy as np def lapalian_demo(image): #拉普拉斯算子 # ...
- （Python OpenGL）【3】着色器 PyOpenGL
(Python OpenGL)现在开始我们使用着色器来进行渲染.着色器是目前做3D图形最流行的方式. OpenGL的渲染管线流程: 数据传输到OpenGL—>顶点处理器—>细分着色—> ...
- Mysql INNER JOIN
1.MySQL INNER JOIN子句将一个表中的行与其他表中的行进行匹配,并允许从两个表中查询包含列的行记录. 2.INNER JOIN子句是SELECT语句的可选部分,它出现在FROM子句之后. ...
- 将已有项目同步到远程git仓库(github,gitee)及giteee的visual studio插件使用一二
一.将已有项目同步到远程仓库的最简便方法是用git bash: 将已有项目同步到远程仓库有两种方法:1用git bash:2.用vs插件,两者的思路和步骤基本一致的. 实验发现,如果用vs插件,bas ...
- 数据结构31：树(Tree)详解
复制广义表数据结构中的树 树是数据结构中比较重要也是比较难理解的一类存储结构.本章主要主要围绕二叉树,对树的存储以及遍历做详细的介绍,同时还会涉及到有关树的实际应用,例如构建哈弗曼编码等. 由于树存储 ...
- 改变iOS app的icon（iOS10.3）
原文 改变iOS app的icon官方iOS10.3新增了可以让开发者去更改app的icon,接下来看看怎么更改.官方API给的东西很少,只是介绍了一个实例方法: 1 open func setAlt ...
- Xcode的编辑利器Xvim，如何去掉烦人工具栏和文件路径
最近网上看到了一篇关于Xcode的编辑利器,因为以前做FPGA工作时候在ISE SDK下用过vim作为编辑器,所以深知vim的强大,所以安装Xvim: 在安装之后遇到一些配置问题,因为本来就完美控制, ...
- Python迭代器生成器,模块和包
1.迭代器和生成器 2.模块和包 1.迭代器 迭代器对象要求支持迭代器协议的对象,在Python中,支持迭代器协议就是实现对象的__iter__()和__next__()方法. 其中__it ...
- Android_靠谱的监听软键盘状态的方法
public class MyActivity extends AppCompatActivity { /** * 当前界面中的软件盘的状态 */private boolean isKeyBoardO ...
- Java实现范围内随机数
JDK1.7及以上 int randomNum = ThreadLocalRandom.current().nextInt(min, max + 1); // 包含max,所以要加1 JDK1.7以前 ...