声明：本文转载自https://my.oschina.net/u/3754126/blog/2253907，转载目的在于传递更多信息，仅供学习交流之用。如有侵权行为，请联系我，我会及时删除。
先预览一下全部代码：
<!DOCTYPE html>
<html>
<head>
<title>Per.js Demo</title>
<meta charset="UTF-8">
</head>
<body id="body">
<div id="page1">
<h1>Welcome to use this price calculation!</h1>
</div>
<div id="page2" style="display: none;">
<ul p-loop-in="var1">
<li>This is {{var1.name}}</li>
<li>The price is: {{var1.price}}<span p-con="{{var1.price > 20}}"> - To expensive!</span></li>
</ul>
</div>
<button id="tp1">to page1</button>
<button id="tp2">to page2</button>
<button id="btn-refre">Refresh</button>
<script src="Per.js"></script>
<script>
Per.use("Per.page");
Per.page.create.pageGroup("allPage");
Per.page.create.page("allPage","#page1");
Per.page.create.page("allPage","#page2");
var app = Per("ul");
app.dom({
loop: [{name: "apple",price: 20},{name: "bread",price: 30},{name: "banana",price: 25}],
callback: function(){
Per("span").dom({
con: "in"
});
}
},true,true);
Per("#btn-refre").dom({
info: {
item: [{name: "apple",price: 20},{name: "bread",price: 30},{name: "banana",price: 25}]
},
click: function(){
this._super.innerHTML = "Refresh now!";
var val = parseInt(Math.random()*30+1);
this.item[0].price = val;
val = parseInt(Math.random()*30+1);
this.item[1].price = val;
val = parseInt(Math.random()*30+1);
this.item[2].price = val;
app.dom.loop = this.item;
}
});
Per("#tp1").dom({
click: function(){
Per.page.to("allPage",1);
}
});
Per("#tp2").dom({
click: function(){
Per.page.to("allPage",2);
}
});
</script>
</body>
</html>然后发上一波效果图：
没错，就是这样一个页面，那么接下来我就来教大家如何制作。
先把基本页面格式写好。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Per.js Demo</title>
</head>
<body>
</body>
</html>之后我们使用script标签来引入Per.js文件：
<script src="Per.js"></script>
<script>
</script>再然后，我们在body标签里面写上基本结构：
<div id="page1">
<h1>Welcome to use this price calculation!</h1>
</div>
<div id="page2" style="display: none;">
<ul p-loop-in="var1">
<li>This is {{var1.name}}</li>
<li>The price is: {{var1.price}}<span p-con="{{var1.price > 20}}"> - To expensive!</span></li>
</ul>
</div>
<button id="tp1">to page1</button>
<button id="tp2">to page2</button>
<button id="btn-refre">Refresh</button>之后在script标签里面再写js语句：
Per.use("Per.page");
Per.page.create.pageGroup("allPage");
Per.page.create.page("allPage","#page1");
Per.page.create.page("allPage","#page2");
var app = Per("ul");
app.dom({
loop: [{name: "apple",price: 20},{name: "bread",price: 30},{name: "banana",price: 25}],
callback: function(){
Per("span").dom({
con: "in"
});
}
},true,true);
Per("#btn-refre").dom({
info: {
item: [{name: "apple",price: 20},{name: "bread",price: 30},{name: "banana",price: 25}]
},
click: function(){
this._super.innerHTML = "Refresh now!";
var val = parseInt(Math.random()*30+1);
this.item[0].price = val;
val = parseInt(Math.random()*30+1);
this.item[1].price = val;
val = parseInt(Math.random()*30+1);
this.item[2].price = val;
app.dom.loop = this.item;
}
});
Per("#tp1").dom({
click: function(){
Per.page.to("allPage",1);
}
});
Per("#tp2").dom({
click: function(){
Per.page.to("allPage",2);
}
});之后打开浏览器，就正常执行了！
效果如同上方gif图一样！
【tips：必须使用Per.js >= 3.0版本】
本文发表于2018年10月29日 16:00
(c)注：本文转载自https://my.oschina.net/u/3754126/blog/2253907，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如有侵权行为，请联系我们，我们会及时删除.
阅读 1763 讨论 0 喜欢 0
避坑！MotionGo就是一款诈骗软件！千万不要用ChatPPT，浪费时间！
宝塔面板使用WWW用户执行计划任务命令 解决laravel日志权限问题 宝塔设置计划任务执行用户
手机微信一键制作透明底文字表情 教你如何让微信表情包背景为透明 自制微信表情包动图 文字表情在线制作
ssh目录权限配置指南 .ssh文件夹及rsa_id.pub等文件正确权限规则
Mac连接亚马逊AWS EC2 远程连接登录不上去 有pem私钥文件依然要输密码 默认密码 教程
PHP工程师必知必会 - Linux系统常用命令 - Linux中的网络管理命令（下）
| 抢先体验 |
|---|
扫码体验 |
| 闪念胶囊 |
|---|
|
你要过得好哇，这样我才能恨你啊，你要是过得不好，我都不知道该恨你还是拥抱你啊。 17:21 2021年04月19日 查看详情 |
|
直抵黄龙府，与诸君痛饮尔。 18:17 2021年03月28日 查看详情 |
|
那时陪伴我的人啊，你们如今在何方。 16:28 2021年03月19日 查看详情 |
|
不出意外的话，我们再也不会见了，祝你前程似锦。 18:05 2021年03月17日 查看详情 |
|
这世界真好，吃野东西也要留出这条命来看看 21:21 2021年03月14日 查看详情 |
| Contact |
|---|
Y2lvbkBjaGluYWNpb24uY24= |