<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. 设置django在linux后台运行&查看端口使用

    1.后台运行(&),允许所有用户(0.0.0.0)访问,端口为8888 nohup python manage.py runserver 0.0.0.0 8888 & 2.由端口号88 ...

  2. MYSQL查询字段全部为中文的字段

    在实际使用mysql的过程中,会遇到这样的问题,查询字段内容全部为中文内容的数据,对于刚用mysql的小伙伴可能就比较迷失了,不知道怎么使用,其实这个问题很简单,使用下面这个sql语句就可以了 SEL ...

  3. 工具类_SharedPreferencesUtils

    import android.app.Application;import android.content.Context;import android.content.SharedPreferenc ...

  4. saltstack一键部署高可用

    一健推送apache [root@server1 minions]# cd /etc/salt/ [root@server1 salt]# vim master [root@server1 salt] ...

  5. Java的Protected

    没想到接触Java这么多年,今天竟然才发现一直有一个误解 Proteced只能被同一个包内的或者子类的class访问 那么在另一个包的如下代码有问题吗? Sub sub = new Sub(); su ...

  6. ZPL打印机命令解释

    个人备忘: 1.装驱动,装驱动要装对应的ZPL或者EPL版本,目前发现GK888T无需选择,直接装GK888T即可,其他机型未知. 2.标签设计,文本部分用SimSun-ExtB字体,变量内容部分用Z ...

  7. 配置中心：Nacos, Apollo, Consul, Etcd

    Nacos, Apollo, Consul, Etcd 服务.应用不同粒度的配置更丰富的路由规则集中式管理的动态参数规则

  8. kafka原生producer API

    转自https://blog.csdn.net/tianlan996/article/details/80495208 1. 类 public class KafkaProducer<K,V&g ...

  9. android 闹钟设置问题

    Android开发中,alarmManager在5.0以上系统,启动时间设置无效的问题 做一个app,需要后台保持发送心跳包.由于锁屏后CPU休眠,导致心跳包线程被挂起,所以尝试使用alarmMana ...

  10. public class 与 class 的区别

    public class 与 class 的区别 1.一个类前面的public是可有可无的 2.如果一个类使用 public 修饰,则文件名必须与类名一致 3.如果一个类前面没有使用public修饰, ...