一、购物车案例
1.最少买一个商品
<button @click="item.count--" :disabled="item.count===1">-</button>
2.计算属性
computed:{
//是否全选
ckAll:{
set(val){
//循环所有的商品，设置商品的选中状态
this.goodses.forEach(r=>r.isck=val)
},
get(){
//数组的所有的商品都是选中状态，那么全选状态为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:{
//数字保留两位小数
toFixed2(val){
return val.toFixed(2)
}
}
二、课程管理
1.方法
01.加载数据的方法
async loadSubject(){
//发生请求，获取课程数据
let {data:{data,count}} = await axios.get('http://www.bingjs.com:81/Subject/GetSubjectsConditionPages',{
params:{
pageIndex:this.pageIndex,
pageSize:this.pageSize,
subjectName:this.searchText
}
})
//将获取到的数据，传给当前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(){
//解构出课程对象的三个属性
let {subjectName,classHour,gradeId} = this.subject
let {data} = await axios.post('http://www.bingjs.com:81/Subject/Add',{
subjectName,
classHour,
gradeId
})
if(data){
alert('添加成功！')
//调用加载课程信息的方法
this.loadSubject()
//调用清空表单数据的方法
this.clear()
}
},
04.根据课程编号，查询一个课程信息
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(){
//从课程对象里面解构出课程的相关信息
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('修改成功！')
//调用加载课程信息的方法
this.loadSubject()
//调用清空表单数据的方法
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('删除成功！')
//调用加载课程信息的方法
this.loadSubject()
}
},
07.清空表单数据的方法
clear(){
this.subject = {
subjectName:'',
classHour:0,
gradeId:0
}
}
08.计算属性
computed:{
//总页数
totalPage(){
return Math.ceil(this.count/this.pageSize)
}
},
09.监听器
watch:{
//监听当前页码是否发生变化
pageIndex(){
this.loadSubject()
}
},
010.创建完成的生命周期-此时可操作数据了
created() {
//调用加载课程信息的方法
this.loadSubject()
//调用加载年级信息的方法
this.loadGrade()
},
