使用Vue实现简单的商品添加和购物车功能
上边的动态图就是利用vue实现简单的添加商品和加入购物车输入商品名称和价格后点击添加商品，商品加入列表，然后点击商品后边的加入购物车，商品添加进下方的购物车购物车里点击加或者减，可以修改购物车中商品的数量，同时总金额也会随着变化，当商品数量为1的时候再点击减号，弹出是否确认删除的提示框，点击确认，则删除购物车中的商品。并且随着选中框的变化，下方选中的商品数量随着变化，需付总金额也随之变化。使用vu
·
上边的动态图就是利用vue实现简单的添加商品和加入购物车
输入商品名称和价格后点击添加商品，商品加入列表，然后点击商品后边的加入购物车，商品添加进下方的购物车
购物车里点击加或者减，可以修改购物车中商品的数量，同时总金额也会随着变化，当商品数量为1的时候再点击减号，弹出是否确认删除的提示框，点击确认，则删除购物车中的商品。并且随着选中框的变化，下方选中的商品数量随着变化，需付总金额也随之变化。
使用vue的三部曲：引包、留坑、实例化
知识点包括：vue基本常用指令的使用、组件化、父子组件之间的通讯、数据监听watch和computed等
贴一下全部的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
</head>
<body>
<!--留坑-->
<div id="app">
</div>
<!--引包-->
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
//把购物车模块抽取成单独的一个组件，组件化开发，实现解耦并且达到可复用的目的
var Chat={
//子组件接收父组件传递的数据
props:['chatarr'],
template:`
<div>
购物车
<table border="1">
<tr>
<th>选中</th>
<th>课程</th>
<th>数量</th>
<th>价格</th>
</tr>
<tr v-for='(chat,index) in chatarr'>
<td>
<input type="checkbox" v-model='chat.active' name="">
</td>
<td>{{chat.text}}</td>
<td>
<span @click='reducecount(index)'>-</span>
{{chat.count}}
<span @click='addcount(index)'>+</span>
</td>
<td>{{chat.count*chat.price}}</td>
</tr>
<tr>
<td colspan='2'>选中的课程：{{activeCount}}/{{count}}</td>
<td colspan='2'>需付金额：{{totalpirce}}</td>
</tr>
</table>
</div>
`,
computed:{
activeCount(){
return this.chatarr.filter(v=>v.active).length
},
count(){
return this.chatarr.length
},
totalpirce(){
let total = 0;
this.chatarr.forEach(v=>{
if(v.active){
total+=v.price*v.count
}
})
return total
}
},
methods:{
//点击减号减少购物车商品数量
reducecount(index){
if(this.chatarr[index].count>1){
this.chatarr[index].count--
}else{
if(window.confirm(`确认删除${this.chatarr[index].text}?`))
this.chatarr.splice(index,1)
}
},
//点击加号增加购物车商品数量
addcount(index){
this.chatarr[index].count++
},
},
watch:{
chatarr:{
handler(){
window.localStorage.setItem('chat',JSON.stringify(this.chatarr))
},
deep:true
}
}
}
//实例化
new Vue({
el:'#app',
template:`
<div>
<div>
课程：<input type="text" name="" v-model='course'>
价格：<input type="text" name="" v-model='price'>
<button @click='addcourse'>添加商品</button>
</div>
<ul>
<li v-for='(list,index) in classlist'>
课程名称：{{list.text}}---价格：{{list.price}}
<button @click='addtochat(index)'>添加到购物车</button>
</li>
</ul>
<!-- 父组件给子组件传递数据 -->
<chat :chatarr='chatarr' ></chat>
</div>
`,
components:{
Chat
},
data:{
classlist:[],
course:'',
price:'',
//购物车数组
chatarr:[],
},
methods:{
//添加商品
addcourse(){
//插入数据到商品库
this.classlist.push({text:this.course,price:this.price})
//清空输入的商品信息
this.course=''
this.price=''
},
//添加至购物车
addtochat(index){
//alert(index)
const goods=this.classlist[index]
const result = this.chatarr.find(v=>v.text==goods.text)
if(result){
result.count+=1
}else{
this.chatarr.push({...goods,count:1,active:true})
}
},
},
created(){
if(window.localStorage.getItem('chat')!=null){
//利用本地存储做数据持久化 获取本地存储数据
this.chatarr=JSON.parse(window.localStorage.getItem('chat'))
}
}
})
</script>
</body>
</html>
上边的功能如果不用vue，用原生的JS或者JQ写的话，应该还是比较复杂的。
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献20条内容
所有评论(0)