lichen360 【VUE教程】自写购物车模板案例，相当全面的运用了VUE的案例！
笔记也卸载里面了，js代码和HTML写在一起的，简介明了，没有多余代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车案例</title>
</head>
<!--
知识点笔记：
1.循环 记住index
2.v-if 和 v-else 控制显示
3.用v-bind动态控制属性---disabled 控制 能否点击
4.computed 用到了计算属性
5.filters 用到了过滤器，方便的给对应数据进行格式包装（过滤）
6.splice 函数的使用---表示移除，也可用于插入 splice(2,2)表示删除两个元素 spalice(2,0,'F')表示第二个位置插入F这个元素 其他删除函数 pop()/shift()
-->
<body>
<div id="app">
<div v-if="books.length">
<table>
<thead></thead>
<tr>
<th>序号</th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
<tbody>
<tr v-for="(item,index) in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<!--这里用到了过滤器（filters） 自定义方法showPrice-->
<td>{{item.price | showPrice}}</td>
<td>
<button v-bind:disabled= "item.count <= 1" @click="jian(index)">-</button>
{{item.count}}
<button @click="jia(index)">+</button>
</td>
<td><button @click="yichu(index)">移除</button></td>
</tr>
</tbody>
</table>
<h2>总价格：{{jsall | showPrice}}</h2>
</div>
<h2 v-else>购物车为空</h2>
</div>
<script src="../vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
books:[
{
id: 1,
name: "水浒传",
date: "2020-04-04",
price: 54.00,
count: 1
},
{
id: 2,
name: "三国演义",
date: "2020-04-04",
price: 34.00,
count: 1
},
{
id: 3,
name: "水浒传",
date: "2020-12-04",
price: 36.00,
count: 1
},
{
id: 4,
name: "水浒传",
date: "2020-14-04",
price: 54.00,
count: 1
},
],
},
methods: {
jia(index){
this.books[index].count ++ ;
},
jian(index){
this.books[index].count -- ;
},
yichu(index){
this.books.splice(index,1);//1 为移除自己
}
},
//计算属性
computed: {
jsall(){
let $all = 0;
for(let i = 0; i < this.books.length; i++){
$all += this.books[i].price * this.books[i].count;
}
return $all;
}
},
//过滤器
filters: {
showPrice(price){
return '￥' + price.toFixed(2);
}
}
})
</script>
</body>
</html>
如下载链接失效，请联系管理员处理【QQ：941007525，微信:style028666】
免责申明：
本站资源均来源于互联网，如有侵权请联系站长！将第一时间删除
本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
资源仅供学习参考请勿商用或其它非法用途，否则一切后果用户自负！
毛毛博客 » 【VUE教程】自写购物车模板案例，相当全面的运用了VUE的案例！
免责申明：
本站资源均来源于互联网，如有侵权请联系站长！将第一时间删除
本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
资源仅供学习参考请勿商用或其它非法用途，否则一切后果用户自负！
毛毛博客 » 【VUE教程】自写购物车模板案例，相当全面的运用了VUE的案例！
