Vue简易购物车实例

vue是前端轻量级MVVM框架，门槛相对较低，今天就用Vue做一个简易版本的购物车实例，我写的是vue2的形式，发表该文章以便记录

一.vue.js官网下载：安装 — Vue.js

二.这里我使用的是直接引入的一个vue.js

三.原理分析和实现

引入vue.js

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

实例源码

HTML部分

 <div id="app"><form action="#" method="post"><table border="1" style="width: 450px;text-align: center"><tr><td style="width: 8%"><input type="checkbox" v-model="isChecked"></td><td style="width: 30%">产品名称</td><td style="width: 20%">产品单价</td><td style="width: 20%">产品数量</td><td style="width: 30%">金额</td></tr><tr v-for="(item,index) in lists " :key="index"><td><input type="checkbox" v-model="item.isCheck"></td><td>{{item.name}}</td><td >{{item.price}}</td><td><input type="number" min="0"  v-model="item.num" style="width: 40px"></td><td style="color: red;font-weight: bold">￥{{(item.price*item.num).toFixed(2)}}</td></tr><tr><td colspan="5" style="text-align: left;color: red;font-weight: bold ;text-align: center" >总价:    ￥{{getTotal }}</td></tr></table></form></div>

准备下列数据

lists:[{isCheck:false,name:"钢笔",price:2.52,num:2},{isCheck:false,name:"毛笔",price:3.5,num:0},{isCheck:false,name:"雨伞",price:15.6,num:1},{isCheck:false,name:"辣条",price:0.5,num:0},{isCheck:false,name:"宋轶的签名照",price:200,num:2}]

完整实例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>偷故事的鸭</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><form action="#" method="post"><table border="1" style="width: 450px;text-align: center"><tr><td style="width: 8%"><input type="checkbox" v-model="isChecked"></td><td style="width: 30%">产品名称</td><td style="width: 20%">产品单价</td><td style="width: 20%">产品数量</td><td style="width: 30%">金额</td></tr><tr v-for="(item,index) in lists " :key="index"><td><input type="checkbox" v-model="item.isCheck"></td><td>{{item.name}}</td><td >{{item.price}}</td><td><input type="number" min="0"  v-model="item.num" style="width: 40px"></td><td style="color: red;font-weight: bold">￥{{(item.price*item.num).toFixed(2)}}</td></tr><tr><td colspan="5" style="text-align: left;color: red;font-weight: bold ;text-align: center" >总价:    ￥{{getTotal }}</td></tr></table></form></div><script>const  vm=new  Vue({el:"#app",data(){return{lists:[{isCheck:false,name:"钢笔",price:2.52,num:2},{isCheck:false,name:"毛笔",price:3.5,num:0},{isCheck:false,name:"雨伞",price:15.6,num:1},{isCheck:false,name:"辣条",price:0.5,num:0},{isCheck:false,name:"宋轶的签名照",price:200,num:2}]}},computed:{//计算总价格getTotal(){// 获取lists中isCheck为true的数据let _listsCheck=this.lists.filter(function (val){return val.isCheck===true;})//总价let totalPrice=0for (let i = 0; i < _listsCheck.length; i++) {  //循环获取lists中isCheck为true的数据totalPrice+=_listsCheck[i].num*_listsCheck[i].price//将对应isCheck为true的数量与价格相乘得出总价}return totalPrice.toFixed(2);  //总价保留2为小数},isChecked:{get(){let flag=true;//读取的时候触发this.lists.forEach(el=>{  //迭代lists中为isCheckif(el.isCheck==false){  //当子选项有一个为false时，则全选设置为falseflag=false;}})return flag;},set(val) //当isChecked被赋值的时候会触发这个set方法{if(val) //判断如果全选被选中，则其他的子选项全部选中，如果全选被取消，则其他的所有子选项取消选中{this.lists.map(el=>el.isCheck=true);}else{this.lists.map(el=>el.isCheck=false);}}}}})</script>
</body>
</html>

效果图：

Vue简易购物车实例相关推荐

用vue和node写的简易购物车
[新增vue中使用pug模板] 在webpack.config.js引入pug的loader,就可以在vue中使用pug模板. module: {loaders: [{test: /\.vue$/,l ...
【Vue案例】——实现简易购物车功能
实现简易购物车功能静态页面展示商品详情页购物车页面购物车功能的实现将商品添加至购物车首先我们要在商品详情页为每一个商品的添加购物车按钮绑定一个点击事件,参数是该商品对象(将商品的所有属性包 ...
web快速入门之基础篇-js：3_3、简易购物车
目录一.前言二.js代码实例演示 1.简易购物车01_数量变化 (1)实例代码 (2)效果演示 2.简易购物车02_数量价格同步 (1)实例代码 (2)效果演示一.前言上一篇介绍了DHTML对 ...
vue3仿写简易购物车
这是一个按着千锋kerwin老师的视频写的简易购物车,用vue3写的,软件用vscode,详细视频资源见链接引入vue3的地址 <script type="text/javascri ...
用Vue实现购物车组件
前言本实例主要介绍利用Vue实现购物车组件,顶部可以切换标签"全部"."好评"和"买过"的数据,标签"全部"下还可以切 ...
Session机制二（简易购物车案例）
一:案例一(简易购物车) 1.目录结构 2.step1.jsp 1 <%@ page language="java" contentType="text/html; ...
cookie购物车php简单,cookie的优化与购物车实例
php 的 cookie的优化与购物车实例一 Cookie 的优化 1.1 一般而言,我们设置cookie是在php中设置例如: setcookie('testKey1','hello world ...
01.vue的简单实例
前段框架vue.js非常热门,每个vue应用都是通过创建vue函数创建新的vue实例开始,首先我们来创建一个简单的vue实例多手动写写代码,你会发现真的很烦躁 <!DOCTYPE html&g ...
Android 中编写一个简易购物车，商品包括商品名称，单价，数量，可以对商品进行增删改查功能。（ArrayList，SQLite）
Android 中编写一个简易购物车,商品包括商品名称,单价,数量,可以对商品进行增删改查功能.(ArrayList,SQLite) 布局(activity_main.xml): <?xml v ...
javaweb练手项目jsp+servlet简易购物车系统
简易购物车项目这是一个用intellij IDEA做的简易的javaweb项目,开发环境使用的jdk1.8和tomcat8以及mysql数据库. 1.项目开发准备: 创建github仓库项目框架搭 ...

Vue简易购物车实例

Vue简易购物车实例相关推荐

最新文章

热门文章