添加删除列表
Vue.componeponent('my-father',{
template:`
`,
data:function(){
return{
list:['apple','pear','orange'],
fruit:''
}
},
methods:{
add:function(){
this.list.push(thi(sh(this.fruit)
)
}
}
})
Vue.componeponent('my-child',{
props:['fruList'],
template:`
-
{{value}}
`,
methods:{
delt:function(ind){
this.fruList.splice(ind(ind,1)
}
}
})
new Vue({
el:'#app'
})
购物车
Vue.componeponent('my-father',{
template:`
编号 | 名称 | 单价 | 数量 | 小计 |
---|
`,
data:function(){
return{
fruList:[
{pname:'apple',price:3,count:3,sub:9},
{pname:'pear',price:4,count:4,sub:16},
{pname:'orange',price:5,count:5,sub:25}
]
}
}
})
Vue.componeponent('my-child',{
props:['list'],
template:`
{{>{{value.count}}}}
`,
data:function(){
return{
sum:0
}
},
methods:{
add:function(ind){
this.list[ind[ind].count++ ;
//计算小计
this.list[ind[ind].sub=ub=this.list[ind[ind].count*nt*this.list[ind[ind].price;
this.countSum();
();
},
redu:function(ind){
if(if(this.list[ind[ind].count>1){
this.list[ind[ind].count--
}
//计算小计
this.list[ind[ind].sub=ub=this.list[ind[ind].count*nt*this.list[ind[ind].price;
this.countSum();
();
},
countSum:function(){
for(var i=0,total=0;i<;i total+=l+=this.list[i].[i].sub; } this.sum=tot=total; } } }) new Vue({ el:'#app' }) 子传父 子传父用事件 实例
Vue.componeponent('my-father',{
template:`
{{mess}}
`,
data:function(){
return{
mess:''
}
},
methods:{
revMsg:function(txt){
this.mess=txt=txt
}
}
})
Vue.componeponent('my-child',{
template:`
`,
data:function(){
return{
msg:'张世远是共产主义接班人'
}
},
methods:{
sendFather:function(){
this.$emit('send',d',this.msg)
)
}
}
})
new Vue({
el:"#app"
})