vue做的简单购物车
<code>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="http://cdn.bootcss.com/bootswatch/3.3.7/cerulean/bootstrap.css"/>
</head>
<body>
<div id="app" class="container">
<table class="table table-condensed table-bordered ">
<tr>
<th>书名</th>
<th>价格</th>
<th>数量</th>
<th>总价</th>
<th>操作</th>
</tr>
<tr v-for="book in books">
<td>{{book.name}}</td>
<td>{{book.price}}</td>
<td>
<button type="button" v-on:click="book.count--">-</button>
<input type="text" v-model="book.count"/>
<button type="button" v-on:click="book.count++">+</button>
</td>
<td>{{book.price*book.count}}</td>
<td>
<button type="button" class="btn btn-danger" v-on:click="remove(book)">删除</button>
</td>
</tr>
<tr>
<td colspan="5">合计：{{total}}</td>
</tr>
</table>
<form>
<div class="form-group">
<label for="bookname">书名</label>
<input type="email" class="form-control" id="bookname" v-model="addbook.name">
</div>
<div class="form-group">
<label for="bookprice">价格</label>
<input type="number" class="form-control" id="bookprice" v-model="addbook.price">
</div>
<div class="form-group">
<label for="bookcount">数量</label>
<input type="number" class="form-control" id="bookcount" v-model="addbook.count">
</div>
<button type="button" class="btn btn-primary" v-on:click="add()">Submit</button>
</form>
</div> <script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" charset="utf-8">
var app = new Vue({
el: "#app",
data: {
books: [
{name: "vue.js", price: 10, count: 1},
{name: "react.js", price: 20, count: 1},
{name: "angular.js", price: 30, count: 1},
{name: "node.js", price: 40, count: 1}
],
addbook: {name: "", price: "", count: ""}
},
methods: {
remove: function (book) {
var index = this.books.indexOf(book);
if (index !== -1) {
this.books.splice(index, 1);
}
},
add: function () {
this.books.push({name:this.addbook.name,price:this.addbook.price,count:this.addbook.count});
this.addbook= {name: "", price: "", count: ""}
}
},
computed: {
total: function () {
var total = 0;
this.books.forEach(function (item, index, input) {
total += item.price * item.count;
});
return total;
}
}
})
</script>
</body>
</html>
</code>
vue做的简单购物车的更多相关文章
- 用 Vue 做一个简单的购物app
前言 最近在学习Vue的使用.看了官方文档之后,感觉挺有意思的.于是着手做了一个简单的购物app.h5 与原生 app 交互的原理这是我第一次在这个网站上写分享,如有不当之处,请多多指教. 一整个项目 ...
- angular做的简单购物车
虽然本人也是刚刚才开始学习angular.js,并不是非常会,但是这并不能阻止我对angular的喜爱.因为它太省代码了,比如说一个比较简单的购物车,就是只有商品名称,单价,数量,小计,总计和删除功能 ...
- vue 做一个简单的TodoList
目录结构 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- 使用Vue做个简单的评论 + localstorage存储
1.引入Vue.js 2.编写代码 代码 <!DOCTYPE html> <html lang="zh"> <head> <meta c ...
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- day 81 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- MUI框架-05-用MUI做一个简单App
MUI框架-05-用MUI做一个简单App MUI 是一个前端框架,前端框架就像 Bootstrap,EasyUI,Vue ,为了做 app 呢,就有了更加高效的 MUI,我觉得前端框架有很多,也没有 ...
- 前台vue的使用简单小结
前台vue的使用简单小结 本项目要求:安装有node.js 6.0以及以上安装npm使用vue.js官方安装方法初始化项目npm install安装VueResurce:npm install vue ...
- axios在Vue中的简单应用（一）
1.安装axios: npm install --save axios vue-axios 2.安装qs: qs.stringify(data)可以解决data数据格式问题 npm install - ...
随机推荐
- （zxing.net）一维码UPC A的简介、实现与解码
一.简介 UPC(Universal Product Code)码是最早大规模应用的条码,其特性是一种长度固定.连续性的条 码,目前主要在美国和加拿大使用,由于其应用范围广泛,故又被称万用条码. U ...
- UDP实现一个简易的聊天室 (Unity&&C#完成)
效果展示(尚未完善) UDP User Data Protocol 用户数据报协议 概述 UDP是不连接的数据报模式.即传输数据之前源端和终端不建立连接.使用尽最大努力交付原则,即不保证可靠交付. 数 ...
- Asp.net Core IIS上安装部署及502.5错误解决
总结: 安装Microsoft Visual C++ 2015 Redistributable(https://www.microsoft.com/en-us/download/details.asp ...
- Hibernate 干货
一 .hibernate概念: hibernate应用在javaee 三层框架中的dao层(web 层 --service层--dao层),在dao层实现对数据库的CRUD操作.hibernate是对 ...
- Qt5学习笔记（消息过滤器）
T06EventFilter.pro HEADERS += \ MyWidget.h SOURCES += \ MyWidget.cpp QT += widgets gui MyWidget.h #i ...
- 渗透日常之 花式实战助你理解CSRF
本文作者:i春秋签约作家——onls辜釉 最近比较忙,很久没发文章了,Onls本就只是一个安全爱好者,工作也不是安全相关.以往的文章也更像是利用简单漏洞的“即兴把玩”,更多的是偏向趣味性,给大家增加点 ...
- SQL中DateTime转换成Varchar样式
SQL中DateTime转换成Varchar样式语句及查询结果:Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AMSelect ...
- 【bug】—— H5页面在 ios 端滑动不流畅的问题
IOS系统的惯性滑动效果非常6,但是当我们对div加overflow-y:auto;后是不会出这个效果的,滑动的时候会感觉很生涩.怎么办? 方案一: 在滚动容器内加-webkit-overflow-s ...
- 使用java执行ffmpeg命令进行推流操作
视频网站中提供的在线视频播放功能,播放的都是FLV格式的文件,它是Flash动画文件,可通过Flash制作的播放器来播放该文件.项目中用制作的player.swf播放器. 多媒体视频处理工具FFmpe ...
- Jmeter之线程组详解
hello,更新几天的分享,线程数现在才分享,感觉怪怪的,原谅我没有考虑到一个顺序问题哈,那里总结好了,我就发那里,先把组件都写完,再来项目实战,希望大家不要责怪哈,内容有写的不详细的,或者我说错了, ...