Vue实现购物车实例代码两则

(编辑：jimmy 日期: 2024/11/26 浏览：3 次 )

一、第一种比较简单

效果图

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>购物车案例</title>
 <script src="/UploadFiles/2021-04-02/vue.js">

二、一个用vue实现的简单响应式购物车案例
实现结果

如上，所有书类数据存在数组里，遍历显示在表格中，点击+和-可以实现数量和总价格的响应式变化，其中，减号到1时便添加了disabled类型，无法点击。 价格显示时通过过滤器显示的，加上Z￥符号和两位小数。项目结构为三个文件。
index.html


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" href="style.css" rel="external nofollow" >
</head>
<body>
<div id="app">
 <div v-if="books.length">
 <table>
 <thead>
 <tr>
 <th></th>
 <th>书籍日期</th>
 <th>出版日期</th>
 <th>价格</th>
 <th>购买数量</th>
 <th>操作 </th>
 </tr>
 </thead>

 <tbody>
 <tr v-for="(item,index) in books">
 <!--<td v-for="value in item">{{value}}</td>-->
 <td>{{item.id}}</td>
 <td>{{item.name}}</td>
 <td>{{item.date}}</td>
 <!--<td>{{getFinalPrice(item.price)}}</td> 下面是过滤器语法-->
 <td>{{item.price | showPrice}}</td>
 <td>
 <button @click="increment(index)" v-bind:disabled="item.count<=1">-</button>
 {{item.count}}
 <button @click="decrement(index)">+</button>
 </td>
 <td>
 <button @click="removeHandler(index)">移除</button>
 </td>
 </tr>
 </tbody>
 </table>
 <h2>总价格: {{totalprice | showPrice}}</h2>
 </div>
 <h2 v-else> 购物车为空</h2>
</div>
<script src="/UploadFiles/2021-04-02/vue.js">

main.js


const app = new Vue({
 el:"#app",
 data: {
 books: [
 {
 id: 1,
 name: '算法导论',
 date: '2019-01-10',
 price: 85.00,
 count: 1
 },
 {
 id: 2,
 name: '计算机导论',
 date: '2019-02-14',
 price: 90.00,
 count: 2
 },
 {
 id: 3,
 name: '科学导论',
 date: '2019-09-10',
 price: 85.21,
 count: 1
 },
 {
 id: 4,
 name: '网络导论',
 date: '2019-08-21',
 price: 19.02,
 count: 1
 },
 ]
 },
 methods:{
 getFinalPrice(price) {
 return '$' + price.toFixed(2)
 },
 increment(index){
 /*if(this.books[index].count <= 1) return*/
 this.books[index].count--
 },
 decrement(index){
 this.books[index].count++
 },
 removeHandler(index){
 this.books.splice(index,1)
 }
 },
 filters:{
 showPrice(price){
 return '$' + price.toFixed(2)
 }
 },
 computed:{
 totalprice(){
 let tprice = 0
 for(let i = 0; i< this.books.length; i++)
 {
 tprice += this.books[i].price * this.books[i].count
 }
 return tprice
 }
 }
})



style.css


table{
 border: 1px solid #e9e9e9;
 border-collapse: collapse;
 bordre-spacing: 0;
}

th, td {
 padding: 8px 16px;
 border: 1px solid #e9e9e9;
 text-align: left;
}

th{
 backgroud-color: #f7f7f7;
 color: #5c6b77;
 font-weight: 600;
}

上一篇：JavaScript类的继承多种实现方法
下一篇：vue实现购物车案例

一句话新闻

一文看懂荣耀MagicBook Pro 16

荣耀猎人回归！七大亮点看懂不只是轻薄本，更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象：要么轻薄但性能一般，要么性能强劲但笨重臃肿。然而，今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上，荣耀宣布猎人游戏本正式回归，称其继承了荣耀 HUNTER 基因，并自信地为其打出“轻薄本，更是游戏本”的口号。
众所周知，寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验，而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起，我们不禁对它产生了强烈的好奇：作为代表荣耀猎人游戏本的跨界新物种，它究竟做了哪些平衡以兼顾不同人群的各类需求呢？

友情链接:杰晶网络 DDR爱好者之家南强小屋黑松山资源网白云城资源网网站地图 SiteMap