Vue实现小购物车功能

本文实例为大家分享了Vue实现小购物车功能的具体代码,供大家参考,具体内容如下

本人还在初级学习阶段,有很多不足之处,希望能指出错误,一起进步

HTML代码块

<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="(itme,index) in books">

<td>{{itme.id}}</td>

<td>{{itme.name}}</td>

<td>{{itme.date}}</td>

<!-- showPrice过滤器 -->

<td>{{itme.price | showPrice}}</td>

<td>

<!-- 动态绑定disabled,当数量小于1时 禁止点击按钮-->

<button @click="decrement(index)" :disabled="itme.count <= 1">-</button>

{{itme.count}}

<button @click="increment(index)">+</button>

</td>

<td><button @click="Handle(index)">移除</button></td>

</tr>

</tbody>

</table>

<h2>总价格:{{totalPrice | showPrice}}</h2>

</div>

<h2 v-else>购物车为空</h2>

</div>

</body>

css代码块

table{

border: 1px solid #e9e9e9;

border-collapse: collapse;

border-spacing: 0;

}

th,td{

padding: 8px 16px;

border: 1px solid #e9e9e9;

text-align: left;

}

th{

background: #f7f7f7;

color: #5c6b77;

font-weight: 600;

}

Vue.js代码块

const app = new Vue({

el:'#app',

data:{

books:[

{

id:1,

name:'《算法议论》',

date:'2001-1',

price:85.00,

count:1

},

{

id:2,

name:'《编程珠玑》',

date:'2002-1',

price:65.00,

count:1

},

{

id:3,

name:'《Unix编程艺术》',

date:'2000-1',

price:59.00,

count:1

},

{

id:4,

name:'《代码大全》',

date:'2005-1',

price:135.00,

count:1

},

]

},

/**

* 使用普通方法

*/

methods:{

//获取小数点的方法

// getFinalPrice(price){

// return '¥' + price.toFixed(2);

// }

//点击事件

increment(index){

this.books[index].count++;

},

decrement(index){

this.books[index].count--;

},

Handle(index){

this.books.splice(index,1);

}

},

computed:{

totalPrice(){

let totalPrice = 0;

for(let i = 0; i < this.books.length; i++){

totalPrice += this.books[i].price * this.books[i].count;

}

return totalPrice;

}

},

/**

* 使用过滤器获取小数点

*/

filters:{

showPrice(price){

return '¥' + price.toFixed(2);

}

}

})

效果如图:

还有很多不足之处,希望大家能指出。

关于vue.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 Vue实现小购物车功能 的全部内容, 来源链接: utcz.com/p/238734.html

回到顶部