<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. PDF文档转换为图片、图片转成PDF 及PDF合并

    简介 功能:PDF文档按每页转换成一张图片,一张图片转换成一张PDF 并将多张PDF合成一个多页的PDF文档. 经历:在各个网站上搜索始终出现各种问题,尤其是遇到引用的版本问题尤其头疼,不是不能适用当 ...

  2. python网络编程--FTP上传文件示例

    1.基础版(供学习了解原理使用,low) server服务端 import socket import struct import json server = socket.socket() ip_p ...

  3. GO学习笔记 - 函数名前面是否有输入参数肯定是不一样的！！

    在刚接触GO语言时候,我相信你也会有这种困惑,为什么有的函数名前面有输入参数,而一些却没有,它们是否有差别?确实有差别,没有输入参数,是一般的函数:有输入参数,是结构的方法,输入参数叫做“方法接收者” ...

  4. Nmap 扫描

    最近在家里学习渗透,看到了nmap对服务器进行端口扫描,记录学习如下: Nmap支持非常多的扫描方式,包括TCP Syn ,TCP Connect,TCP ACK,TCP FIN/Xmas/NULL, ...

  5. php留言系统（9）

    1.参照之前的(mvc框架总结)将整体框架定下来之后,那么请求默认参数将变为: //默认请求首页: //P=front //C=fIndex //A=show 1.1     找到控制器fIndexC ...

  6. “全栈2019”Java多线程第十四章：线程与堆栈详解

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

  7. BZOJ 1922--大陆争霸(最短路)

    1922: [Sdoi2010]大陆争霸 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 2113  Solved: 947[Submit][Status ...

  8. C#-一维数组——★★冒泡排序★★

    ////★★★★★冒泡排序 ; i < a - ; i++) { ; j < a; j++) { if (age[i] < age[j]) { int zhong = age[i]; ...

  9. string、char *的转换

    string转char* 主要有三种方法可以将str转换为char*类型,分别是:data(); c_str(); copy(); data()方法 string str = "hello& ...

  10. mariadb(mysql)的安装

    1 使用官方源安装mariadb vim /etc/yum.repos.d/MariaDB.repo 添加repo仓库配置内容 [mariadb] name=MariaDB baseurl=http: ...