Vue-4：大麦网

一、大麦网-详情
1.disabled用于绑定元素是否禁用

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

2.过滤器

filters:{
                //保留两位小数
                toFixed2(val){
                    return val.toFixed(2)
                }
            },

3.计算属性

computed:{
                //用于计算总价
                totalPrice(){
                    return this.priceList[this.activeIndex]*this.count
                }
            },
            //在created生命周期函数中获取id
            created() {
                //获取url参数id
                // search里面保存的值的格式是：?id=12345
                let id = window.location.search.split('=')[1]  
                //发生ajax请求，根据id获取门票信息
                axios.get('./data/type.json').then(({data:{pageData:{resultData}}})=>{
                    //获取指定的门票对象
                    this.item = resultData.find(r=>r.id===id)
                })
            },

二、大麦网-分类页
1.定义数据

 data() {
                return {
                    //城市数组
                    citys:['全部','绍兴','武汉','苏州','南京','重庆','成都','北京','安阳','日照','舟山','北京','宁波','上海'],
                    //城市高亮索引
                    cityActive:0,
                    //分类数组
                    types:['全部','体育','演唱会','话剧歌剧','音乐会','展览休闲'],
                    //分类高亮索引
                    typeActive:0,
                    //第一步：门票数组
                    tickets:[]
                }
            },

2.高亮索引

watch:{
                //监听城市高亮索引
                cityActive(){
                    this.loadTickets()
                },
                //监听分类高亮索引
                typeActive(){
                    this.loadTickets()
                }
            },

3.创建完成的生命周期

created() {
                // 第三步：created生命周期里面调用发送请求的方法
                this.loadTickets()
            },

4.定义方法

methods: {
                //加载门票信息的方法
                loadTickets(){
                    //第二步：发生ajax请求，获取所有的门票信息
                    axios.get('./data/type.json').then(({data:{pageData:{resultData}}})=>{
                        //判断是否需要根据城市筛选数据
                        if(this.cityActive>0){
                            //获取城市名称
                            let city = this.citys[this.cityActive]
                            //筛选数据
                            resultData = resultData.filter(r=>r.cityname===city)
                        }
                        //判断是否需要根据分类筛选数据
                        if(this.typeActive>0){
                            //获取分类名称
                            let type = this.types[this.typeActive]
                            //筛选数据
                            resultData = resultData.filter(r=>r.categoryname===type)
                        }

                        this.tickets = resultData
                    })
                },
                //跳转到详情页
                gotoDetail(id){
                    window.location.href = "./detail.html?id="+id
                }
            },

三、补充：高阶函数

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

1.forEach方法，用于遍历整个数组

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

2.filter方法，用于过滤源数组，返回满足条件的新数组

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

3.findIndex方法，用于查找数组中满足条件的第一个元素的位置，没有找到，返回-1

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

4.find方法，用于查找数组中满足条件的第一个元素，没有找到，返回undefined

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

5.some方法，用于检查数组中，是否有满足条件的元素

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

6.every方法，用于检查数组中，所有元素是否都满足条件

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

7.map方法，用于将原始数组中的所有元素，根据条件返回一个全新的数组

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