一纺阔、大麥網(wǎng)-詳情
1.disabled用于綁定元素是否禁用

<button class="btn" @click="count--" :disabled="count===1">-</button>

2.過濾器

filters:{
                //保留兩位小數(shù)
                toFixed2(val){
                    return val.toFixed(2)
                }
            },

3.計算屬性

computed:{
                //用于計算總價
                totalPrice(){
                    return this.priceList[this.activeIndex]*this.count
                }
            },
            //在created生命周期函數(shù)中獲取id
            created() {
                //獲取url參數(shù)id
                // search里面保存的值的格式是：?id=12345
                let id = window.location.search.split('=')[1]  
                //發(fā)生ajax請求，根據(jù)id獲取門票信息
                axios.get('./data/type.json').then(({data:{pageData:{resultData}}})=>{
                    //獲取指定的門票對象
                    this.item = resultData.find(r=>r.id===id)
                })
            },

二、大麥網(wǎng)-分類頁
1.定義數(shù)據(jù)

 data() {
                return {
                    //城市數(shù)組
                    citys:['全部','紹興','武漢','蘇州','南京','重慶','成都','北京','安陽','日照','舟山','北京','寧波','上海'],
                    //城市高亮索引
                    cityActive:0,
                    //分類數(shù)組
                    types:['全部','體育','演唱會','話劇歌劇','音樂會','展覽休閑'],
                    //分類高亮索引
                    typeActive:0,
                    //第一步：門票數(shù)組
                    tickets:[]
                }
            },

2.高亮索引

watch:{
                //監(jiān)聽城市高亮索引
                cityActive(){
                    this.loadTickets()
                },
                //監(jiān)聽分類高亮索引
                typeActive(){
                    this.loadTickets()
                }
            },

3.創(chuàng)建完成的生命周期

created() {
                // 第三步：created生命周期里面調(diào)用發(fā)送請求的方法
                this.loadTickets()
            },

4.定義方法

methods: {
                //加載門票信息的方法
                loadTickets(){
                    //第二步：發(fā)生ajax請求，獲取所有的門票信息
                    axios.get('./data/type.json').then(({data:{pageData:{resultData}}})=>{
                        //判斷是否需要根據(jù)城市篩選數(shù)據(jù)
                        if(this.cityActive>0){
                            //獲取城市名稱
                            let city = this.citys[this.cityActive]
                            //篩選數(shù)據(jù)
                            resultData = resultData.filter(r=>r.cityname===city)
                        }
                        //判斷是否需要根據(jù)分類篩選數(shù)據(jù)
                        if(this.typeActive>0){
                            //獲取分類名稱
                            let type = this.types[this.typeActive]
                            //篩選數(shù)據(jù)
                            resultData = resultData.filter(r=>r.categoryname===type)
                        }

                        this.tickets = resultData
                    })
                },
                //跳轉(zhuǎn)到詳情頁
                gotoDetail(id){
                    window.location.href = "./detail.html?id="+id
                }
            },

三亿絮、補充：高階函數(shù)

let arr = [11,22,33,44,55,66,77,88,99,111,222,333,444]

1.forEach方法，用于遍歷整個數(shù)組

arr.forEach((r,i)=>{
            console.log(r,i);
        })

2.filter方法麸拄，用于過濾源數(shù)組派昧，返回滿足條件的新數(shù)組

let arr2 = arr.filter(r=>r%2===0)
        console.log(arr2);

3.findIndex方法，用于查找數(shù)組中滿足條件的第一個元素的位置拢切，沒有找到蒂萎，返回-1

let index1 = arr.findIndex(r=>r===55)
        console.log(index1);
        let index2 = arr.findIndex(r=>r===56)
        console.log(index2);

4.find方法，用于查找數(shù)組中滿足條件的第一個元素淮椰，沒有找到五慈，返回undefined

let num1 = arr.find(r=>r%2===0)
        console.log(num1);
        let num2 = arr.find(r=>r>10000)
        console.log(num2);

5.some方法纳寂，用于檢查數(shù)組中，是否有滿足條件的元素

let isOk = arr.some(r=>r>100)
        console.log(isOk);

6.every方法泻拦，用于檢查數(shù)組中毙芜，所有元素是否都滿足條件

let isOk2 = arr.every(r=>r>100)
        console.log(isOk2);

7.map方法，用于將原始數(shù)組中的所有元素争拐，根據(jù)條件返回一個全新的數(shù)組

let arr3 = arr.map(r=>r/2)
        console.log(arr3);