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>
最新文章
- 用JavaScript实现的选项卡
- JSON: Property 'xxx' has no getter method的解决办法
- git svn clone时间估算
- node（邮件发送特性）
- 解决Hibernate向MySQL数据库插入中文乱码问题
- 如何设置iframe高度自适应，在跨域的情况下能做到吗？
- [leetcode]Find Minimum in Rotated Sorted Array @ Python
- 怎样解决asp.net.mvc上传附件超过长度问题？
- Sqlserver_In、exists使用
- TC SRM 593 DIV1 250(dfs)
- BZOJ 1854 游戏
- 使用ItextSharp产PDF完整操作
- 【Demo 0001】Java基础-数据类型
- PE文件格式详解(上)
- Robots协议
- thinkphp中fetch渲染模板的处理
- WPF自定义命令和处发命令
- Mybatis操作oracle数据库的一些坑
- python多线程学习二
- 微信小程序基础