当前位置:首页 >> 网络编程

Vuejs实现购物车功能

开始更新前端框架Vue.JS的相关博客。

功能概述

学习了Vue.JS的一些基础知识,现在利用指令、数据绑定这些基础知识开发一个简单的购物车功能。功能要点如下:
(1)展示商品的名称、单价和数量;
(2)商品的数量可以增加和减少;
(3)购物车的总价要实时更新,即数量发生变动,总价也要相应的改变;
(4)商品可以从购物车中移除;
(5)具有选择功能,只计算选中的商品的总价。

上一张截图,如下:

Vuejs实现购物车功能

代码

代码分成三部分,分别是HTML、JS、CSS。关键的是HTML和JS。

HTML

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Vue 购物车</title>
 <script src="/UploadFiles/2021-04-02/vue.min.js">

JS

var app = new Vue({
 el:'#app',
 data:{
 list:[
  {
  id:1,
  name:'iPhone 8',
  price:8888,
  count:1
  },
  {
  id:2,
  name:'Huwei Mate10',
  price:6666,
  count:1
  },
  {
  id:3,
  name:'Lenovo',
  price:6588,
  count:1
  }
 ],
 selectList:[],
 checked:false
 },
 computed:{
 totalPrice:function(){
  var total = 0;
  for(var i = 0,len = this.selectList.length;i < len;i++){
  var index = this.selectList[i];
  var item = this.list[index];
  if(item){
   total += item.price * item.count;
  }
  else{
   continue;
  }

  }
  return total.toString().replace(/\B("htmlcode">
[v-cloak]{
 display: none;
}

table{
 border: 1px solid black;
 border-collapse: collapse;
 border-spacing: 0;
 empty-cells: show;
}

th,td{
 padding: 8px 16px;
 border:1px solid black;
 text-align: center;
}

th{
 background-color: gray;
}

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

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