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 - ...
随机推荐
- C#获取手机验证码+榛子云平台
今天给大家推荐一个简单的获取手机验证码注册+获取随机4位数 测试框架:.net4.7以上 1.榛子云注册:http://smsow.zhenzikj.com/,送一条测试短信,最低充10元即刻使用 2 ...
- c# in out ref关键字
class in_out_ref { #region in 关键字 delegate void DContravariant<in A>(A argumen); static void o ...
- 用 go 写 WebAssembly入门
Golang WebAssembly 入门 Golang 在1.11版本中引入了 WebAssembly 支持,意味着以后可以用 go编写可以在浏览器中运行的程序,当然这个肯定也是要受浏览器沙盒环境约 ...
- java线程池(一)
自JDK5之后,Java推出了一个并发包,java.util.concurrent,在Java开发中,我们接触到了好多池的技术,String类的对象池.Integer的共享池.连接数据库的连接池.St ...
- Mysql 中日期类型bigint和datetime互转
MySql数据库中字段类型bigint 长度是10位的 mysql> select (from_unixtime(1554047999))as datatime;+--------------- ...
- Ubuntu16.04 - 怎么能够更好设置PATH变量，便于管理？
“/etc/profile”是linux里面的全局变量设置文件,加入这里的PATH变量,全局都可以使用,非常方便.加入时候很简单了,直接在PATH末尾加入":+要加入的变量"就可以 ...
- gitlab中修改项目名称客户端修改方法
如果gitlab项目名称已经修改,对于本地已经克隆下来的仓库,可以使用如下命令进行修改: git remote set-url origin 新的项目路径
- Mysql 优化与测试
由于经常被抓取文章内容,在此附上博客文章网址:,偶尔会更新某些出错的数据或文字,建议到我博客地址 : --> 点击这里 以下的测试数据根据环境的不同所耗费的时间有所不同,例如我在腾讯云上的测试 ...
- A - 最少拦截系统 （最长上升子序列）
点击打开链接 A - 最少拦截系统 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能超过前一发的高度. ...
- “全栈2019”Java异常第二章：如何处理异常？
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...