一庸诱、購物車案例
1.最少買一個商品
<button @click="item.count--" :disabled="item.count===1">-</button>
2.計算屬性
computed:{
//是否全選
ckAll:{
set(val){
//循環(huán)所有的商品棋弥，設(shè)置商品的選中狀態(tài)
this.goodses.forEach(r=>r.isck=val)
},
get(){
//數(shù)組的所有的商品都是選中狀態(tài)柒莉，那么全選狀態(tài)為true
return this.goodses.length===0 ? false : this.goodses.every(r=>r.isck)
}
},
//計算總計
totalPrice(){
return this.goodses.filter(r=>r.isck).reduce((a,b)=>a+b.price*b.count,0)
}
},
3.方法
methods: {
//刪除商品
delGoods(index){
if(confirm('是否確定刪除脐彩？')){
this.goodses.splice(index,1)
}
}
},
4.過濾器
filters:{
//數(shù)字保留兩位小數(shù)
toFixed2(val){
return val.toFixed(2)
}
}
二邪蛔、課程管理
1.方法
01.加載數(shù)據(jù)的方法
async loadSubject(){
//發(fā)生請求皆疹，獲取課程數(shù)據(jù)
let {data:{data,count}} = await axios.get('http://www.bingjs.com:81/Subject/GetSubjectsConditionPages',{
params:{
pageIndex:this.pageIndex,
pageSize:this.pageSize,
subjectName:this.searchText
}
})
//將獲取到的數(shù)據(jù)，傳給當(dāng)前Vue實例管理
this.subjects = data
this.count = count
},
02.加載年級的方法
async loadGrade(){
let {data} = await axios.get('http://www.bingjs.com:81/Grade/GetAll')
this.grades = data
},
03.添加課程的方法
async addSubject(){
//解構(gòu)出課程對象的三個屬性
let {subjectName,classHour,gradeId} = this.subject
let {data} = await axios.post('http://www.bingjs.com:81/Subject/Add',{
subjectName,
classHour,
gradeId
})
if(data){
alert('添加成功蝶怔！')
//調(diào)用加載課程信息的方法
this.loadSubject()
//調(diào)用清空表單數(shù)據(jù)的方法
this.clear()
}
},
04.根據(jù)課程編號奶浦，查詢一個課程信息
async getSubjectById(subjectId){
let {data} = await axios.get('http://www.bingjs.com:81/Subject/GetSubjectById',{
params:{
subjectId
}
})
// 獲取課程信息
let {SubjectName:subjectName,ClassHour:classHour,GradeId:gradeId} = data
// 更新可定對象的信息
this.subject = {
subjectId,
subjectName,
classHour,
gradeId
}
},
05.修改課程的方法
async updateSubject(){
//從課程對象里面解構(gòu)出課程的相關(guān)信息
let {subjectId,subjectName,classHour,gradeId} = this.subject
let {data} = await axios.post('http://www.bingjs.com:81/Subject/Update',{
subjectId,
subjectName,
classHour,
gradeId
})
if(data){
alert('修改成功！')
//調(diào)用加載課程信息的方法
this.loadSubject()
//調(diào)用清空表單數(shù)據(jù)的方法
this.clear()
}
},
06.刪除課程的方法
async deleteSubjectById(subjectId){
if(!confirm('是否確定刪除')) return
let {data} = await axios.post('http://www.bingjs.com:81/Subject/Delete',{subjectId})
if(data){
alert('刪除成功踢星！')
//調(diào)用加載課程信息的方法
this.loadSubject()
}
},
07.清空表單數(shù)據(jù)的方法
clear(){
this.subject = {
subjectName:'',
classHour:0,
gradeId:0
}
}
08.計算屬性
computed:{
//總頁數(shù)
totalPage(){
return Math.ceil(this.count/this.pageSize)
}
},
09.監(jiān)聽器
watch:{
//監(jiān)聽當(dāng)前頁碼是否發(fā)生變化
pageIndex(){
this.loadSubject()
}
},
010.創(chuàng)建完成的生命周期-此時可操作數(shù)據(jù)了
created() {
//調(diào)用加載課程信息的方法
this.loadSubject()
//調(diào)用加載年級信息的方法
this.loadGrade()
},
