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 - ...
随机推荐
- .NET Core调用WCF的最佳实践
现在.NET Core貌似很火,与其他.NET开发者交流不说上几句.NET Core都感觉自己落伍了一样.但是冷静背后我们要也看到.NET Core目前还有太多不足,别的不多说,与自家的服务框架WCF ...
- WPF 使用OCX控件速度很慢
最近公司项目,需要在wpf上面嵌入ocx控件,但是程序运行起来后,进行操作后,界面一直很卡,找了各种原因,没有找到原因,后来直接运行exe文件,速度顿时快了很多.
- Git 常用知识
git 常用命令 创建并checkout分支: git checkout -b branch_name git merge 与 git rebase 的区别 git rebase 合并后将形成一条直线 ...
- 一次mysql调优过程
由于经常被抓取文章内容,在此附上博客文章网址:,偶尔会更新某些出错的数据或文字,建议到我博客地址 : --> 点击这里 前几天进行了一个数据库查询,比较缓慢,便查询了一下,在这里记录一下,方便 ...
- jzoj5813
tj:可以知道,隨意構造一個數列x,且x的第i位被n整除的方案是(約數個數)^2m,因為所有數可以隨便選,只要這個數能被n整除即可,方案為約數個數 設一個合法數列a的f值為x,則x小於n^m 假設所有 ...
- 九，php中上传文件
1,php网页上传文件大小有限制的,默认最大2M.可以修改php.ini调节大小,upload_max_filesize = 2M.网页上传使用http协议,上传大文件性能不好:有些公司做一个客户端软 ...
- mxonline实战-1，创建应用及相应模型
前言 环境说明:python3.5 + django2.0, 用的pycharm4.04专业版 课程视频地址 https://coding.imooc.com/learn/list/78. ...
- 从源码的角度再学「Thread」
前言 Java中的线程是使用Thread类实现的,Thread在初学Java的时候就学过了,也在实践中用过,不过一直没从源码的角度去看过它的实现,今天从源码的角度出发,再次学习Java Thread, ...
- P1273 有线电视网(树形dp)
P1273 有线电视网 题目描述 某收费有线电视网计划转播一场重要的足球比赛.他们的转播网和用户终端构成一棵树状结构,这棵树的根结点位于足球比赛的现场,树叶为各个用户终端,其他中转站为该树的内部节点. ...
- leetcode-78-子集（用bfs解决）
题目描述: 给定一组不含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集). 说明:解集不能包含重复的子集. 示例: 输入: nums = [1,2,3] 输出: [ [3], [1] ...