一、大麦网-详情
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);