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>

原文地址:https://www.cnblogs.com/lwj820876312/p/9219299.html

时间: 2024-11-13 06:38:14

vue换一换功能原型的相关文章

字母汉子组合的验证码,包括实现看不清换一个的功能

1.写一个验证码,前台什么都不用写,这是CreateVerificationCode_Page.aspx.cs后台代码 using System;using System.Collections;using System.Configuration;using System.Data;using System.Linq;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlCo

开博第一篇:记一个前端实现的“换一换”功能

需求的极简概要:实现“换一换”按钮的功能,点击之后,换另一批对应的品牌 刚开始的时候考虑使用ajax请求数据,之后通过js在页面上填充到指定位置,但是真是懒得给这个ajax请求单独再配一个请求映射了,干脆直接在后台把需要的内容全部拼成JSON字符串,直接在前台解析,分页. 页面比较简单,就不上html代码了,大概思路就是:两个“换一换”按钮分别对应两套数据,共用一个分页的方法,分别传入各自的页数,显示对应页数的内容.当然了,实现“换一换”的方法多种多样,我在此只是记录一下自己的思路,欢迎批评指教

DevExpress 全体窗口换肤的功能 winform

首先让所有窗体继续一个基类窗体 新建一个基类窗体,如SkinForm 去掉构造函数,加上一个皮肤对象 public partial class SkinForm: XtraForm { public static DevExpress.LookAndFeel.DefaultLookAndFeel defaultLookAndFeel = new DevExpress.LookAndFeel.DefaultLookAndFeel(); } 在需要换肤的窗体上继承SkinForm 得到所有皮肤名字可

动态IP怎么在电脑上建立使用达到秒换IP的功能

动态IP怎么在电脑上建立使用达到秒换IP的功能动态IP地址(Dynamic IP)指的是在需要的时候才进行IP地址分配的方式.动态IP地址和静态IP地址是对应的..所谓动态就是指当你每一次上网时,电信会随机分配一个IP地址,静态指的是固定分配一个IP地址,每次都用这一个地址.由于IP地址资源很宝贵,因此大部分用户上网都是使用动态IP地址的,比如通过Modem.ISDN.ADSL.有线宽频.小区宽频等方式上网的计算机,都是在每次上网的时候临时分配一个IP地址.除了是运营商来给分配动态IP外,也可以

iPhone5S进水返厂维修多少钱售后换主板换新机5S进水里不开机维修多少钱(推荐维修)

 为什么网上的价格差距这么大?为什么打电话问的商家报的价格都不一样?哪种几百块钱的屏幕(芯片)能相信吗?淘宝上面的屏幕(芯片)能相信吗?哪里能找到原装的屏幕呢?哪里的维修点才靠谱呢?北京中关村和深圳那边的维修市场能相信吗?     电子城报的二三百能相信吗?原装的配件和仿的价钱相差多少呢?       当您看到了这里,请您选择飞维智能科技有限责任公司(我们用最真挚的态度来为您服务)   我们在保证质量的前提下用最低的价格来为广大客户服务.我们的原则是(少花钱,买放心,保质量,求口碑)   工程师

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

这个vue实现备忘录的功能demo是K在github上找到的,K觉得这是一个用来对vue.js入门的一个非常简单的demo,所以拿在这里共享一下. (尊重他人劳动成果,从小事做起~  demo原github地址:https://github.com/vuejs/vue) 一.实现效果 二.代码展示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>备忘录&l

换一换js

(function(){ var tit = $("#changes"), con = $("#wday>ul"), page = con.length,        index = 0; tit.click(function(){            if(index < page){                index++;            }else{                index = 0;            }  

css3 换一换效果

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style media="screen"> .header{ width: 80px ; height: 80px; border: 1px solid #ccc;

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

本篇文章主要介绍了vue 的keep-alive缓存功能的实现,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Vue 实现组件信息的缓存 当我们在开发vue的项目过程中,避免不了在路由切换到其他的component再返回后该组件数据会重新加载,处理这种情况我们就需要用到keep-alive来缓存vue的组件信息,使其不再重新加载. 一.在app.vue里 keep-alive> <router-view></router-vi