VUE购物车小案例—vue指令的综合应用

需求：

运用Vue基础指令知识实现小小购物车：

涉及到的指令有：v-for、v-model 、v-on、v-text

1.能够显示商品名，价格，以及当前商品在购物车的数量
2. 点击加+ 减- 可以更改购物车中产品数量，如果数量小于0 则移除
3.根据产品价格和数量统计出总金额。

话不多说，直接上代码：（无css样式）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/lib/vue.js" type="text/javascript" charset="utf-8"></script><style type="text/css">table tr,th,table tr,td{/* width: 200px; */text-align: center;}</style></head><body><div id="app"><h2 style="margin-left: 300px;">MyShoopingCqrt</h2><table border="6" cellspacing="6" cellpadding="6"><tr><th>品名Name</th><th>价格Price</th><th>重量Quality</th></tr><tr v-for="(item,index) in goods"><td>{{ item.name }}</td><td>（{{ item.price }}￥/kg）</td><td><span><button type="button" @click="reduce(item)">-</button></span><span>{{ item.quality }}</span><span><button type="button" @click="add(item)">+</button></span></td></tr><tr><td>Total</td><td colspan="2">{{ total }}</td></tr><tr><td>添加商品Addgoods:<input type="text" v-model="newGoodName" /></td><td>商品价格Addprice:<input type="number" v-model="newGoodPrice" /></td><td><button type="button" @click="AddnewFood">加入购物车Add to Cart</button></td></tr></table></div><script type="text/javascript">const vm= new Vue({el:"#app",data:{total:0,newGoodName:"",newGoodPrice:"",goods:[{name:"apple",price:8,quality:1},{name:"orange",price:7,quality:1},{name:"banada",price:6,quality:1},{name:"watermelon",price:5,quality:1},]},methods:{add(item){item.quality++;this.calcaute();},reduce(item){item.quality--;// 当商品总质量小于0 移除商品if(item.quality<0){// 获得商品的索引let index= this.goods.indexOf(item);// 从数组移除商品this.goods.splice(index,1)}this.calcaute();},AddnewFood(){if(this.newGoodName==""||this.newGoodPrice==""){alert("添加商品信息不能为空哦~")}else{this.goods.push({name:this.newGoodName,price:this.newGoodPrice,quality:1})this.calcaute();}},calcaute(item){this.total=0;this.goods.forEach((item)=>{this.total+=item.price*item.quality;})this.newGoodName="",this.newGoodPrice="";},// 声明周期函数  当vm被创建会执行 createdcreate(){this.calcaute();}}})</script></body>
</html>

VUE购物车小案例—vue指令的综合应用相关推荐

axios vue 回调函数_Vue 02 —— Vue 入门小案例~使用 Axios 中的GET、POST请求
作为后端攻城狮,写前端代码是一种什么体验? 相信不少人和 @Python大星一样,有写过前端代码的经历. 记录一下,Vue 框架开发中"啼笑皆非"的故事,非专业前端人员,该案例无 ...
Vue学习小案例--分页组件封装
文章目录 Vue学习小案例--分页组件封装修改成Vue(使用组件) Vue学习小案例–分页组件封装 index.html <!DOCTYPE html> <html lang=&q ...
【Android笔记41】使用Android实现一个简易版本的购物车小案例
这篇文章,主要是使用Android实现一个简易版本的购物车小案例. 目录一.购物车案例 1.1.创建主界面 (1)主界面布局样式 (2)商品列表Fragment
VUE:学生列表案例——内部指令v-for与v-on简单应用
#本案例需要熟悉v-for与v-on这两个vue内部指令,下面通过两个简单的案例,带领大家迅速熟悉一下这两个常用的内部指令 v-for指令:主要用于列表的渲染与循环数组简单案例: 关键代码部分: & ...
Vue+OpenLayers学习系列（九）Vue+OpenLayers小案例（长度测量、面积测量、坐标定位、坐标获取）
很早之前做的一个例子,最近想复习下Vue+OpenLayers的使用案例,所以发出来供大家下载 vue-ol-demo-master 本Demo的功能包括:地图展示.地图放大缩小.添加鹰眼.长度测量. ...
Vue.js小案例(2)
即时搜索这个例子主要应用了vue.js的自定义过滤器,可以通过 Vue.filter() 注册一个全局过滤器,具体用法可以参考这里,vue.js也提供了一些内置过滤器. CSS代码: [v-cl ...
jquery清空购物车小案例
实现效果可实现功能数量增加.减少小计结算总商品数量.总价格计算移除购物车清空购物车代码 HTML结构: <div class="box"><div ...
vue小案例（小黑记事本和购物车）
vue小案例小黑记事本小案例 <footer class="footer" ><span class="todo-count" v-if=& ...
angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例...
基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){this.state{msg:"双向数据绑定" ...

VUE购物车小案例—vue指令的综合应用

VUE购物车小案例—vue指令的综合应用相关推荐

最新文章

热门文章