Vue.js框架实现购物车功能

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

<!DOCTYPE html>

<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script src="../lib/vue.min.js"></script>

</head>

<body>

<div id="app" style="position: relative;left: 30%">

<table cellpadding="10">

<thead>

<th><input type="checkbox" v-model="cb" v-on:click="allSelect">全选</th>

<th>名称</th>

<th>单价</th>

<th>数量</th>

<th>金额</th>

<th>操作</th>

</thead>

<tbody>

<tr v-for="x in info">

<td><input type="checkbox" v-model="x.bol" v-on:click="sign()"></td>

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

<td>{{x.price}}</td>

<td><input type="number" v-model="x.num" min="0" style="width: 50px;text-align: center" v-on:click="count(x)" v-on:change="count(x)"></td>

<td>{{x.total}}</td>

<td><button v-on:click="del(x)">删除</button></td>

</tr>

</tbody>

</table>

<Br>

<p>总金额:{{all}}</p>

</div>

<script>

var vm = new Vue({

el: "#app",

data: {

all: 0,

cb: false,

info: [{

bol: false,

name: "iphone7",

price: 6000,

num: 1,

total: 6000

}, {

bol: false,

name: "荣耀6x",

price: 1200,

num: 1,

total: 1200

}, {

bol: false,

name: "dell笔记本",

price: 4000,

num: 1,

total: 4000

}]

},

methods: {

//计算单价

count: function(obj) {

for(var i = 0; i < this.info.length; i++) {

//

if(this.info[i] == obj) {

this.info[i].total = obj.price * obj.num;

}

//如果被选中了,就计算总价格

if(obj.bol) {

this.allSelect();

}

}

},

//删除

del: function(obj) {

this.info.splice(this.info.indexOf(obj), 1)

this.allCount();

},

//单选

sign: function() {

this.allCount();

},

//全选

allSelect: function() {

for(var i = 0; i < this.info.length; i++) {

this.info[i].bol = this.cb;

}

this.allCount();

},

//计算总价

allCount: function() {

//每次计算总价都要清空

this.all = 0;

for(var i = 0; i < this.info.length; i++) {

//计算被选中的商品

if(this.info[i].bol) {

this.all += this.info[i].total;

}

}

}

}

})

</script>

</body>

</html>

效果图:

更多文章可以点击《Vue.js前端组件学习教程》学习阅读。

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

更多vue学习教程请阅读专题《vue实战教程》

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

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

回到顶部