使用Per.js快速開發商品價格計算頁面 - for Per.js3.0

時間 2019-11-13

標籤使用 per.js 快速開發商品價格計算頁面 per.js3.0 欄目 JavaScript 简体版

原文原文鏈接

先預覽一下所有代碼：javascript

<!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>

而後發上一波效果圖：html

沒錯，就是這樣一個頁面，那麼接下來我就來教你們如何製做。java

先把基本頁面格式寫好。瀏覽器

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Per.js Demo</title>
    </head>
    <body>

    </body>
</html>

以後咱們使用script標籤來引入Per.js文件：app

<script src="Per.js"></script>
<script>
</script>

再而後，咱們在body標籤裏面寫上基本結構：dom

<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語句：oop

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);
    }
});

以後打開瀏覽器，就正常執行了！this

效果如同上方gif圖同樣！spa

【tips：必須使用Per.js >= 3.0版本】code