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 - ...
随机推荐
- 关于SqlServer连接错误
以前用数据库好好的,今天突然就出现连接错误,贴出出错误消息 出现这种错误的原因:服务里面sqlserver服务没有打开. 解决方案 : 计算机右键,打开管理,找到服务,把服务里面的SQL Server ...
- Windows服务器管理与优化
一.服务器自动重启windows服务器运行时间长了,内存会爆满,比如数据库会缓存大量的数量,IIS进程也会缓存数据而没有及时释放.这样需要定时重启服务器来释放内存. 创建任务计划,如在 每周一/周三/ ...
- C#中的类
C#编程语言,从本质上讲是一组类型声明.所以,本人认为第一个要区分的点是:类型!=类. 当然,如果想要系统的学习C#还是应该先了解一下.Net框架,本文目的只是从相对宏观的角度讲清楚C#中的类.关于类 ...
- 开源应用框架BitAdminCore：更新日志20180903
索引 NET Core应用框架之BitAdminCore框架应用篇系列 框架演示:https://www.bitadmincore.com 框架源码:https://github.com/chenyi ...
- asp.net mvc 3 linq实现数据的增、删、改、查、
添加数据 定义一个对象: public class Student { public int id{get; set;} public string Name{get;set;} public str ...
- kolla-ansible 重新部署 ceph 遇到的问题
问题 TASK [ceph : Fetching Ceph keyrings] ******************************************* fatal: [controll ...
- Neutorn LBaaS 原理
Load Balance as a Service(LBaaS)是 Neutron 提供的一项高级网络服务.LBaaS 允许租户在自己的网络中创建和管理 load balancer. load bal ...
- Aircrack-ng无线破解总结
过年回来家,奈何没网,实属无奈,只好看破解教程,看能否破出来.于是总结如下 测试环境在linux平台下,我用的是ubuntu环境.ubuntu安装可以直接用sudo apt-get install a ...
- robot framework学习笔记之一 资源文件（Resource）和外部资源（External Resources）
一.资源文件(Resource) 测试套件主要是存放测试案例,资源文件主要是用来存放用户关键字. 添加资源 在目录型的Project/Test Suite下单击鼠标右键,选择『New Resou ...
- Nginx的反向代理和负载均衡
1 Nginx的反向代理 1.1 什么是反向代理 正向代理 反向代理: 反向代理服务器是引用在服务端.决定哪台服务器提供服务. 1.2 反向代理的模拟 1.2.1 反向代理 应该有一个nginx服务器 ...