Vue实现商城购物清单
今天分享一个我平时写的Vue实现购物车清单的小demo
html部分
<body>
<div id="my" >
<div class="panel panel-info" style="margin:20px;">
<!-- 头部 -->
<div class="panel-heading">
<h1 style="display: inline-block;">我的购物清单</h1>
<span>清单总数
<span class="label label-warning" >{{lists.length}}</span>
</span>
</div>
<!-- 内容 -->
<div class="panel-body">
<div class="input-group">
<input class="form-control" type="text" v-model="name" placeholder="请输入要添加的商品"/>
<span class="input-group-btn">
<button class="btn btn-primary" @click="add()">添加</button>
</span>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>清单名称</th>
<th>状态</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<tr v-for="(list,index) in lists">
<td>{{list.name}}</td>
<td>{{list.state | stateFilter}}</td>
<td><button type="button" class="btn btn-danger btn-sm" @click="del(index)">删除</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
js部分
window.onload = function(){
new Vue({ //构建vue实例
el:'#my', //挂载元素 element
data:{ //数据
name:'',
age:18,
arr:[1,2,3,4,5],
obj:{msg:'123'},
lists:[
{name:'手机',state:'0'},
{name:'衣服2',state:'1'},
{name:'包包3',state:'2'},
{name:'化妆品',state:'0'}
]
},
methods:{ //方法
add:function(){
if(!this.name) return;
this.lists.unshift({name:this.name,state:'未采购'});
this.name='';
},
del:function(index){
this.lists.splice(index,1); //index 位置 1个数
}
},
filters:{ //过滤器 文本格式 管道
stateFilter:function(type){ //list.state
// if(type =='0'){
// return '未采购'
// }else {
// return '已采购'
// }
switch(type){//在我们写业务代码时，如果判断条件过多可用switch替换if...else
case '0':
return '未采购';
case '1':
return '正在采购';
case '2':
return '已采购';
default :
return '未采购';
}
}
}
})
}
如果有跟我一样正在学习vue的小伙伴，需要源码的可扫描下方二维码添加我联系方式，可以发给你哟！
QQ
微信