<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换一换功能原型的更多相关文章

  1. Unity里的人物驱动/换装备/换武器/换衣服/卡通重定位（转）

    Unity里的人物驱动/换装备/换武器/换衣服/动画重定位 刚学的过程被这个问题困扰最多. 首先,基本的,大家都知道驱动人物需要骨架.绑骨的Mesh和动画(这三个要是不知道的话就得考虑看看计算机图形学 ...

  2. 今天抠图，Python实现一键换底片！想换什么换什么（附源码）

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 生活中我们会拍很多的证件照,有的要求红底,有的是白底,有的是蓝底,今天不通 ...

  3. [转]搬瓦工换机房换ip之后不能连外网

    搬瓦工换机房换ip之后不能连外网 时间 2015-07-21 15:17:16  Wendal随笔 原文  http://wendal.net/2015/07/21.html 主题 iptables ...

  4. jq验证码换一换

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...

  5. CI 结合 vue.js 的搜索功能模块

    CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...

  6. excel导出功能原型

    本篇博客是记录自己实现的excel导出功能原型,下面我将简单介绍本原型: 这是我自制的窗体,有一个ListView和一个Button(导出)控件. 这是我在网上找到了使用exel需要引用的库. usi ...

  7. 一周一个小demo — vue.js实现备忘录功能

    这个vue实现备忘录的功能demo是K在github上找到的,K觉得这是一个用来对vue.js入门的一个非常简单的demo,所以拿在这里共享一下. (尊重他人劳动成果,从小事做起~  demo原git ...

  8. 示例vue 的keep-alive缓存功能的实现

    本篇文章主要介绍了vue 的keep-alive缓存功能的实现,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Vue 实现组件信息的缓存 当我们 ...

  9. [转]***换机房换ip之后不能连外网

    ***换机房换ip之后不能连外网 时间 2015-07-21 15:17:16  Wendal随笔 原文  http://wendal.net/2015/07/21.html 主题 iptables ...

随机推荐

  1. sap abap 流水号设置

    1.TCODE:SNRO,进入如图所示界面 2. 短文本和长文本用来说明这个编号范围对象,输入任意描述即可. 子对象数据元素我们这里不填.这里需要说明一下,所谓子对象,多数指一个组织结构,比如公司代码 ...

  2. C++并发低级接口：std::thread和std::promise

    std::thread和std::promise 相比std::async,std::thread就原始多了.thread一定会创建新线程(而不是像async那样创建的时候可能不会,后面才创建新线程( ...

  3. ArcGIS api for javascript-图层控制（图层树）

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. XStream -- a simple library to serialize objects to XML and back again

    Link :http://xstream.codehaus.org/index.html http://www.cnblogs.com/hoojo/archive/2011/04/22/2025197 ...

  5. POJ-1128-Frame Stacking

    链接:https://vjudge.net/problem/POJ-1128 题意: 每张图片上面画了一些边框,给出这些边框叠在一起后的图片,图片边框一定是由一个字母表示并且每条边至少三个字符,输入保 ...

  6. Experimental Educational Round: VolBIT Formulas Blitz N

    Description The Department of economic development of IT City created a model of city development ti ...

  7. EXCEL 导入SQL SERVER 方法

    1.注意:确认是否已安装 AccessDatabaseEngine.exe 2.可视化按提示操作.

  8. 线程池ThreadPoolExecutor分析: 线程池是什么时候创建线程的，队列中的任务是什么时候取出来的？

    带着几个问题进入源码分析: 1. 线程池是什么时候创建线程的? 2. 任务runnable task是先放到core到maxThread之间的线程,还是先放到队列? 3. 队列中的任务是什么时候取出来 ...

  9. 4 练习: 使用eclipse开发

    1       练习: 使用eclipse开发 1.1  练习目标 本例讲述在使用eclipse如何创建groovy程序. 1.2  创建new Groovy project 本例假设你已经安装好了g ...

  10. c++判断两字符串是否相等

    正确写法: 头文件: #include<string.h> if(strcmp(str.c_str(),str1.c_str())==0) 注意:以下写法在提交到 vj 全是错 if(st ...