最近学习了Vue，发现了Vue 功能的强大，在此做了一个小案例：实现商品添加到购物车的功能。
大家可以看一下演示图：
这里使用的知识点包括：vue基本常用指令的使用、组件化、父子组件之间的通讯、数据监听watch和computed等
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>商品添加到购物车的案例</title>
<script src="js/vue.js"></script>
<style type="text/css">
table {
border-collapse: collapse;
width: 50%;
height: 160px;
}
td {
text-align: center;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
<script>
//购物车组件
var Chat = {
props: ['chatarr'],
template: `
<div align="center">
<table border="1">
<tr>
<th colspan="4">购物车</th>
</tr>
<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
}
}
}
//创建vue对象，实例化
new Vue({
el: '#app',
template: `
<div align="center">
<div>
商品：<input type="text" name="" v-model='course'></br>
价格：<input type="text" name="" v-model='price'></br>
<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>
</html>
