<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做的简单购物车的更多相关文章

  1. 用 Vue 做一个简单的购物app

    前言 最近在学习Vue的使用.看了官方文档之后,感觉挺有意思的.于是着手做了一个简单的购物app.h5 与原生 app 交互的原理这是我第一次在这个网站上写分享,如有不当之处,请多多指教. 一整个项目 ...

  2. angular做的简单购物车

    虽然本人也是刚刚才开始学习angular.js,并不是非常会,但是这并不能阻止我对angular的喜爱.因为它太省代码了,比如说一个比较简单的购物车,就是只有商品名称,单价,数量,小计,总计和删除功能 ...

  3. vue 做一个简单的TodoList

    目录结构 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  4. 使用Vue做个简单的评论 + localstorage存储

     1.引入Vue.js 2.编写代码 代码 <!DOCTYPE html> <html lang="zh"> <head> <meta c ...

  5. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  6. day 81 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  7. MUI框架-05-用MUI做一个简单App

    MUI框架-05-用MUI做一个简单App MUI 是一个前端框架,前端框架就像 Bootstrap,EasyUI,Vue ,为了做 app 呢,就有了更加高效的 MUI,我觉得前端框架有很多,也没有 ...

  8. 前台vue的使用简单小结

    前台vue的使用简单小结 本项目要求:安装有node.js 6.0以及以上安装npm使用vue.js官方安装方法初始化项目npm install安装VueResurce:npm install vue ...

  9. axios在Vue中的简单应用（一）

    1.安装axios: npm install --save axios vue-axios 2.安装qs: qs.stringify(data)可以解决data数据格式问题 npm install - ...

随机推荐

  1. iOS Png Crush 错误

    添加新的 png 图片到项目里的时候,出现错误 错误内容: while reading... pngcrush caught libpng error: cound not find file... ...

  2. js滚动距离

    滚动距离 onclick="$('html,body').animate({scrollTop:$('.J_user_evaluate').offset().top-110},500)&qu ...

  3. “全栈2019”Java多线程第五章：线程睡眠sleep()方法详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  4. robot framework学习笔记之九-杂记

    Setup和Teardown 假设Suite1下面有Test1和Test2,若它们都设置了Setup和Teardown,那么它们的执行顺序是:Suite1-Setup->Test1-Setup- ...

  5. FTP枢轴攻击

    简单来说,这是攻击者可以利用属于不同网络的那些系统的攻击. 本文作者:jishuzhain 对于这种攻击,攻击者需要利用主服务器来帮助攻击者将自己添加到本地网络中,然后攻击者就可以将客户端系统进行定位 ...

  6. mysql 主从错误以及监控

    同步中的常见的错误和处理 1.现象:在从库上面show slave status\G;出现下列情况,           Slave_IO_Running: Yes           Slave_S ...

  7. 爬虫3：requests库

      一个简单易用的http库,多用于第一步,爬取网站源码   简单例子 import requests   response = requests.get('https://www.baidu.com ...

  8. Laravel5.5 引入并使用第三方类库操作

    理论上,Laravel5系列都支持,各位可以一试.我这里使用5.5版本. 我这里引入了一个将汉字转化为拼音的类库测试,一起来看看吧! 首先,在laravel的app目录下自定义一个文件夹,我用的名字是 ...

  9. 2016级算法期末上机-I.难题·ModricWang's Fight with DDLs III

    1126 ModricWang's Fight with DDLs III 思路 由于题目中已经说明了时间经过了正无穷,因此初始位置是不重要的,并且每条边.每个点的地位是均等的.因此到达每个点的概率就 ...

  10. css的reset和常用的html标签的默认样式整理

    先看下常用的这些标签浏览器的默认样式有哪些: body{ margin: 8px;} hr{ border:1px inset; margin-top:.5em;margin-bottom:.5em; ...