Implementation of shopping cart function based on Vuejs

2021-07-07 06:15:49
OfStack

In this paper, we share the implementation code of Vuejs shopping cart for your reference. The specific contents are as follows

html:


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> Mine vue Shopping cart </title>
 <link rel="stylesheet" href="css/bootstrap.min.css">
 <link rel="stylesheet" href="css/style.css">
 <script src="js/vue.js"></script>
 <script src="js/data.js"></script>
</head>
<body>
 <div class="container">
 <template v-if="data.length">
 <h3> My shopping cart: </h3>
 <div class="product">
 <div class="item">
 <span class="btn btn-default"> Commodity name </span>
 <span class="btn btn-default left"> Unit price of goods </span>
 <span class="btn btn-default left"> Quantity of goods </span>
 <span class="btn btn-default left"> Operation </span>
 </div>
 <div class="item" style="padding:5%;border: 1px solid black" v-for="item in data">
 <span class="btn btn-default">{{item.name}}</span>
 <span class="btn btn-default left" style="margin-left: 18%">{{item.price}}</span>
 <span>
 <em class="btn btn-primary add" v-on:click="add($index)" :class="{off:item.count==11}">+</em>
  {{item.count}}
 <em class="btn btn-primary reduce" v-on:click="reduce($index)" :class="{off:item.count==1}">-</em>
 </span>
 <span class="btn btn-danger left" v-on:click="remove(item)"> Remove </span>
 </div>
 </div>
 <h2> List: </h2>
 <span class="btn btn-primary"> Total commodity price: {{price |currency '$' 2}}</span>
 </template>
 <template v-else>
 <div class="jumbotron">
 <h1> Your shopping cart is empty </h1>
 <p> Whether to re-select </p>
 <p><a class="btn btn-primary btn-lg" href="#" role="button"> Re-select </a></p>
 </div>
 </template>
 </div>
</body>
<script>
 new Vue({
 el:'.container',
 data:{
 data:data
 },
 computed:{
 price:function () {
 var price = 0;
 for(var i=0;i<this.data.length;i++){
 var self = this.data[i];
 price += self.count * self.price;
 }
 return price;
 }
 },
 methods:{
 add:function ($index) {
 var self = this.data[$index];
 if(self.count >10){
 return false;
 }
 self.count++;
 },
 reduce:function($index){
 var self = this.data[$index];
 if(self.count <= 1){
 return false
 }
 self.count--;
 },
 remove:function(item){
 this.data.$remove(item);
 }
 }
 })
</script>
</html>

css:


h3{
 text-align: center;
}
.left{
 margin-left: 14%;
}
.item{
 text-align: center;
 padding: 3%;
}
.add{
 margin-left: 15%;
}
.off{
 background-color: lightgrey;
 border: 1px solid lightgrey;
}

js:


/**
 * Created by Administrator on 2016/7/29.
 */
var data = [
 {
 name:'IPhone 6',
 price:5466,
 id:1,
 count:1
 },
 {
 name:'IMac',
 price:7466,
 id:2,
 count:1
 },
 {
 name:'iPad',
 price:5400,
 id:3,
 count:1
 }
]

This article has been sorted into "Vue. js front-end component learning tutorial", welcome everyone to learn and read.

For the vue. js component tutorial, please click on the topic vue. js component learning tutorial to learn.

For more vue learning tutorials, please read the special topic "vue Practical Tutorial"