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 ...
随机推荐
- OkHttp 3.x 源码解析之Interceptor 拦截器
拦截器 Java里的拦截器是动态拦截Action调用的对象.它提供了一种机制可以使开发者可以定义在一个action执行的前后执行的代码,也可以在一个action执行前阻止其执行,同时也提供了一种可以提 ...
- 一些优秀的Firefox扩展
AdBlock Plus 拦截广告. 在对付CSDN等垃圾网站时非常有用. Block Site 拦截你不想看的网站 没有知乎的一天真好... XStyle 设置自己喜欢的CSS样式(表示自己并不会用 ...
- Codeforces Round #503 (by SIS, Div. 2)B 1020B Badge （拓扑）
题目大意:每个同学可以指定一个人,然后构成一个有向图.1-n次查询,从某个人开始并放入一个东西,然后循环,直到碰到一个人已经放过了,就输出. 思路:直接模拟就可以了,O(n^2) 但是O(n)也可以实 ...
- spring 事务 配置 多个
Spring中事务控制相关配置: <bean id="txManager" class="org.springframework.jdbc.datasource.D ...
- BestCoder Round #64 1002
Sum Accepts: 322 Submissions: 940 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/655 ...
- 爬虫初识和request使用
一.什么是爬虫 爬虫的概念: 通过编写程序,模拟浏览器上网,让其去互联网上爬取数据的过程. 爬虫的工作流程: 模拟浏览器发送请求->下载网页代码->只提取有用的数据->存放于数据库或 ...
- SQL Server 清理日志
USE[master] GO ALTER DATABASE 要清理的数据库名称 SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE 要清理的数据库名称 ...
- 用HTMLParser解析html时报错：No module named 'htmlentitydefs'
python3.6用HTMLParser解析html时报错 No module named 'htmlentitydefs'或No module named 'markupbase' 先上代码 fro ...
- 企业生产环境不同业务linux系统分区方案
转自:http://edu.51cto.com/lession/id-11842.html
- Linux执行.sh文件Permission denied
执行sh文件报没有权限: 看下该文件的权限: 缺少执行的权限,直接加上吧: test.sh 权限加上去了,可以执行sh文件了 若用 chmod 4755 filename 可使此程序具有root的权限