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 ...
随机推荐
- mongoDB3.4安装
添加官方yum源——mongodb3.4vim /etc/yum.repos.d/mongodb-org-3.4.repo [mongodb-org-3.4] name=MongoDB Reposit ...
- Qt 学习之路 2（17）：文件对话框
Home / Qt 学习之路 2 / Qt 学习之路 2(17):文件对话框 Qt 学习之路 2(17):文件对话框 豆子 2012年9月24日 Qt 学习之路 2 85条评论 在前面的章节中 ...
- maven 打包 包含xml
<build> <finalName>dc-exam</finalName> <!-- 包含xml文件 --> <resources> &l ...
- N - 嘤嘤嘤 （并查集+枚举）
Our lovely KK has a difficult Social problem. A big earthquake happened in his area. N(2≤N≤2000)N(2≤ ...
- CF D. Fair（思维+DFS)
http://codeforces.com/contest/987/problem/D 题目大概: 给出一个n个城镇m条边的图,给出每个城镇拥有的特产(可能多个城镇有相同特产).有k种不同特产. 要求 ...
- 毕业设计 python opencv实现车牌识别 界面
主要代码参考https://blog.csdn.net/wzh191920/article/details/79589506 GitHub:https://github.com/yinghualuow ...
- 解决windows server 2008 r2 登录进入桌面只显示一片蓝色背景
非常高的可能性问题是:explorer.exe进程无法加载.请按ctrl+shift+esc调出任务管理器--文件-新任务-输入‘explorer’--确定即可.如无法解决,请进入安全模式关闭非必要的 ...
- bs4的简单使用
一.使用流程 解析流程: 1.pip install bs4 2.导包:from bs4 import BeautifulSoup 3.实例化一个BeautifulSoup对象(将页面源码数据加载到该 ...
- Go语言基础之3--时间和日期序列
一.时间和日期类型 1. time包 2. time.Time类型,用来表示时间 3. 获取当前时间, now := time.Now() 实例1-1 打印输出当前时间 package main i ...
- Ubuntu 14.04下MySQL服务器和客户端的安装
下面进行简单的配置 安装完成后通过修改/etc/mysql/my.cnf(此文件为mysql的配置文件).将文件中的binding-address=127.0.0.1注释掉.其它配置根据需要更改. H ...