vue v-show與v-for同時配合v-bind使用並在href中傳遞多個參數的使用方法

最近在項目中，因為還沒使用前端構建工具，還在使用vue+jquery方法渲染頁面

碰到幾個小問題，在此記錄下作為vue學習之路上的一個小知識點

需求：1、數據列表存在與否狀態，沒有數據顯示默認提示，有數據則渲染出數據列表

2、列表數據存在3種狀態，分別為0，1，2根據狀態給數據打上可使用，已使用，已過期，

3、如果列表狀態為0和1時，才可以查看詳細狀態，同時可以帶上每條數據商品id和狀態id，否則不可以跳轉到詳情頁面

 

一，界面實現

 

 

 

 

 

二，頁面代碼

 

        <div class="weui_cells weui_cells_access mtbefore border-blbr bg-f2 mt0" id="historyElectronics">
<!--            電子券 -->
            <div class="weui_cell mtbefore mt10">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class="f4f">歷史電子券</p>
                </div> 
            </div> 
<!--             <a class="weui_cell mtbefore pt0" v-show="electronicsCard != ''" v-for="electronicsCards in electronicsCard" :href="'link.electronicsDetails?payCode='+electronicsCards.otherOrderId+',effective='+electronicsCards.effective" > -->
            <a class="weui_cell mtbefore pt0" v-show="electronicsCard != ''" v-for="electronicsCards in electronicsCard" :href="getTitleHref(electronicsCards.otherOrderId,electronicsCards.effective)" >
                <div class="weui_cell_bd weui_cell_primary">
                    <div class="cardbarmain electronics">
                        <span class="posl"></span>
                        <span class="posr"></span>
                        <div class="cardbarmainimg"><img src="../b2b-reception/images/logo/chinaliantong.png" width='100%'/></div>
                        <div class="cardbarmainp">
                            <p class="f16" v-text="electronicsCards.productName"></p>
                            <p class="f14 mt5 f-gray82">有效期：<span v-text="electronicsCards.expiryStart"></span>~<span v-text="electronicsCards.expiryEnd"></span></p>
                        </div>
                        <div class="poscardsrc2" v-if="electronicsCards.effective==2"><img src="../b2b-reception/images/cardimg/history02.png" /></div>
                        <div class="poscardsrc2" v-else-if="electronicsCards.effective==0"><img src="../b2b-reception/images/cardimg/history03.png" /></div>
                    </div>
                </div> 
            </a>
            <div class="p20 tc" v-show="electronicsCard == ''">
                <img src="../b2b-reception/images/cardimg/rcordSrc02.png" width='100%'/>
                <p class="tc p10 f16 f-gray">暫無歷史電子券~</p>
            </div>
        </div>

 

 

三，vue代碼

 

var otherOrderId=[]; //payCode
var list = []; //初始列表
var effective=1;  //訂單類型
var page = 1;


//初始化歷史電子券列表
var historyElectronics = new Vue({
    el:"#historyElectronics",
    data:{
        electronicsCard:[],
    }, 
    methods:{
        getTitleHref:function(val1,val2){
            if(val2==0 || val2==1){
                return 'link.electronicsDetails?payCode='+val1+'&effective='+val2;
            }else{
                return;
            }
            
        }
    }

})


$(function(){
    electronicsAjax();
})



//滾動加載
$(window).scroll(function(){
    var viewH =$(document).height();//可見高度
    var contentH =$(document.body).outerHeight(true);//內容高度
    var scrollTop =$(window).scrollTop();//滾動高度
    if((scrollTop+contentH)/viewH >=0.95){ //到達底部時,加載新內容
        if (flag) {
            page++;
            flag = false;
            electronicsAjax();
        }
    }
});
//電子券列表接口
function electronicsAjax(){
    $.ajax({
        type: "POST",
        data:{page:page,effective:effective},
        url : "/wechat/slyderAdventures/pointsNumber",
        success : function(listData) {
            
        var listData =[ //示例數據
                    {"createDate":1516091197000,"creator":null,"lastModifyDate":null,"lastModifier":null,"sid":"3","productId":"57794","productType":"9","userId":null,"systemOrderId":"H2018011616262918810821","otherOrderId":"LUqy8QG0hMn1PAEC3OxJ","productName":"上海成龍電影藝術館d","productExpiryStart":1516032000000,"productExpiryEnd":1518624000000,"commonCode":"923310000864","effective":"1","expiryStart":"2018.03.01","expiryEnd":"2018.06.01"}
                    ,{"createDate":1516091197000,"creator":null,"lastModifyDate":null,"lastModifier":null,"sid":"3","productId":"57794","productType":"9","userId":null,"systemOrderId":"H2018011616262918810821","otherOrderId":"LUqy8QG0hMn1PAEC3OxJ","productName":"上海成龍電影藝術館d","productExpiryStart":1516032000000,"productExpiryEnd":1518624000000,"commonCode":"923310000864","effective":"2","expiryStart":"2018.03.01","expiryEnd":"2018.06.01"}
                    ,{"createDate":1516091197000,"creator":null,"lastModifyDate":null,"lastModifier":null,"sid":"3","productId":"57794","productType":"9","userId":null,"systemOrderId":"H2018011616262918810821","otherOrderId":"LUqy8QG0hMn1PAEC3OxJ","productName":"上海成龍電影藝術館d","productExpiryStart":1516032000000,"productExpiryEnd":1518624000000,"commonCode":"923310000864","effective":"0","expiryStart":"2018.03.01","expiryEnd":"2018.06.01"}
                    ,{"createDate":1516091197000,"creator":null,"lastModifyDate":null,"lastModifier":null,"sid":"3","productId":"57794","productType":"9","userId":null,"systemOrderId":"H2018011616262918810821","otherOrderId":"LUqy8QG0hMn1PAEC3OxJ","productName":"上海成龍電影藝術館d","productExpiryStart":1516032000000,"productExpiryEnd":1518624000000,"commonCode":"923310000864","effective":"1","expiryStart":"2018.03.01","expiryEnd":"2018.06.01"}
                    ]
        list = list.concat(listData);
        historyElectronics.electronicsCard=list;
        },error: function(json){  
            $.toptips('數據異常，請刷新后重試...','warning');
        }
    });
}