通过官网和视频的学习,使用vue写出了购物车的功能
下面直接上代码
<style>
p{
margin:0;
}
ul,li{
list-style:none;
padding:0;
margin:0;
}
.cart{
width:50%;
margin:50px auto;
}
.cart li{
width:100%;
height:50px;
}
.prolist div,.prolist p{
display:inline-block;
}
.chobox{
width:20px;
height:20px;
position:relative;
}
.chobox .cho,.chobox .nocho{
width:20px;
height:20px;
position:absolute;
left:0;
top:0;
border-radius:10px;
background:greenyellow;
}
.chobox .nocho{
z-index:1;
background:pink;
}
.chobox2 .nocho{
display:none;
}
.pro_num span,.pro_num input{
width:20px;
height:20px;
line-height:20px;
float:left;
text-align:center;
}
.pro_num input{
width:40px;
height:18px;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
.pro_num span{
border:1px solid #ccc;
}
.pro_num span.plus{
border-radius:3px 0 0 3px;
}
.pro_num span.sub{
border-radius:0 3px 3px 0;
}
.tab{
width:100%;
float:left;
margin-bottom:10px;
}
.tab li{
float:left;
width:100px;
height:20px;
line-height:20px;
}
.prolist{
clear:both;
}
</style>
<div class="cart" id="cart">
<!-- hash的用法-->
<ul class="tab">
<li>
<a href="#all">全部</a>
</li>
<li>
<a href="#cho">选中</a>
</li>
<li>
<a href="#nocho">未选中</a>
</li>
</ul>
<ul class="prolist">
<li v-for="todo in newtodos">
<div class="perpro">
<input type="checkbox" v-model="todo.ischeck" style="display:none">
<div :class="['chobox',{chobox2:todo.ischeck}]" @click="choose(todo)">
<div class="cho"></div>
<div class="nocho"></div>
</div>
<p>{{todo.name}}</p>
<p>¥{{todo.pri}}</p>
<p class="pro_num">
<span class="plus" @click="plus(todo)">+</span>
<input type="text" v-model="todo.num" @input="chgval()">
<span class="sub" @click="sub(todo)">-</span>
</p>
</div>
</li>
</ul>
<button @click="allcho()">全选</button>
<button @click="allno()">全不选</button>
<button @click="invert
()">反选</button>
<p>选中数量为:<span>{{ttlnum}}</span></p>
<p>总价为:{{ttlpri}}</p>
</div>
<script>
var filter={
all:function(items){
return items
},
cho:function(items){
return items.filter(function(item){
return item.ischeck
})
},
nocho:function(items){
return items.filter(function(item){
return !item.ischeck
})
}
}
var vm2=new Vue({
el:"#cart",
data:{
todos:[
{name:"水果糖",pri:"18.00",num:0,ischeck:true},
{name:"棉花糖",pri:"15.00",num:0,ischeck:false},
{name:"薄荷糖",pri:"18.00",num:0,ischeck:false}
],
ttlpri:0,
curhash:"all"//记录当前的hash
},
computed:{
ttlnum:function(){
return this.todos.filter(function(todo){
return todo.ischeck
}).length
},
newtodos:function(){
return filter[this.curhash]?filter[this.curhash](this.todos):this.todos;
}
},
methods:{
choose:function(todo){
todo.ischeck=!todo.ischeck;
this.ttl();
},
ttl:function(){
var thi=this;
this.ttlpri=0;
thi.todos.forEach(function(todo){
if(todo.ischeck){
thi.ttlpri+=todo.pri*todo.num
}
})
},
chgval:function(){
this.ttl();
},
plus:function(todo){
todo.num++;
this.ttl();
},
sub:function(todo){
if(todo.num>=1){
todo.num--;
this.ttl();
}
},
allcho:function(){
//全选
this.todos.forEach(function(todo){
todo.ischeck=true
})
},
allno:function(){
//全不选
this.todos.forEach(function(todo){
todo.ischeck=false
})
},
invert:function(){
//反选
this.todos.forEach(function(todo){
todo.ischeck=!todo.ischeck
})
}
}
})
//记录当前hash
function listenhash(){
var hash=window.location.hash.slice(1);
vm2.curhash=hash;
console.log(vm2.curhash);
}
listenhash();
window.addEventListener("hashchange",listenhash);
</script>
切记,所有增删改查都是改变了渲染进页面的列表。