开始学习Vue的小白，dalao多多指正

想要实现下面这个界面，包含总价计算、数量增加和移除功能

话不多说代码如下

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title>小购物车</title>

</head>

<body>

<div id="app">

    <table border="2">

        <thead>

            <td>书籍名称</td>

            <td>书籍名称</td>

            <td>出版日期</td>

            <td>价格</td>

            <td>购买数量</td>

            <td>操作</td>

        </thead>

        <tbody>

            <tr v-for="(item,index) in books" >

                <td>{{item.id}}</td>

                <td>{{item.name}}</td>

                <td>{{item.date}}</td>

                <td>{{item.price | showPrice}}</td>

                <td>

                    <button @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button>

                {{item.count}}

                    <button @click="increment(index)">+</button>

                </td>

                <td>

                    <button @click="removeBook(index)">移除</button>

                </td>

            </tr>

        </tbody>

    </table>

    <font>总价:{{toltalPrice | showPrice}}</font>

</div>

<script src="./js/vue.js"></script>

<script>

   const hello = new Vue({

     el:'#app',

     data:{

       message:'Hello Vue !',

       books :[

           {

               id:1,

               name:'编程大法',

               date:'2020-5',

               price:999.00,

               count:1

           },

           {

               id:2,

               name:'编程大法',

               date:'2020-5',

               price:999.00,

               count:1

           },

           {

               id:3,

               name:'编程大法',

               date:'2020-5',

               price:999.00,

               count:1

           },

           {

               id:4,

               name:'编程大法',

               date:'2020-5',

               price:999.00,

               count:1

           }

       ]

     },

     filters: {

              showPrice(price) {

             return '￥'+price.toFixed(2);

              }

        },

    methods:{

        decrement(index){

            this.books[index].count--;

        },

        increment(index){

            this.books[index].count++;

        },

        removeBook(index){

            this.books.splice(index,1);

        }

    },

    computed:{

            toltalPrice(){

                let toltalPrice=0;

                for(let i=0;i<this.books.length;i++){

                    toltalPrice += this.books[i].price * this.books[i].count;

                }

                return toltalPrice;

            }

    }

})

</script>

</body>

</html>

v-for:以前用原生javascript写界面的时候想要呈现出一个列表的效果需要在html中写多个<tr></tr>、<td></td>、<th></th>标签，使代码过于冗余，这就是框架好处之一啊哈哈。

 <tr v-for="(item,index) in books" >
这个写法使item（books数组的项逐一遍历），index会记录数组下标

computed和methods

这也是比较巧妙的地方之一：虽然两者的内容都可以写函数，但是不同之处在于computed里的函数在页面加载时执行一次并且将内容保存在内存中，在下一次使用函数时不用重新调用，直接从内存中拿出来用就行会比methods里的函数节约内存，提高性能，对于频繁使用的函数可以写在computed里面，另外写在标签中时，computed里的函数只需要写函数名，methods里的需要写括号。但是computed会占用内存，所以不频繁调用的可以写在methods里面。computed类似于Vue中的属性，在计算结果发生改变时，结果会动态地发生改变

利用Vue实现一个简单的购物车功能的更多相关文章

  1. 利用JSP编程技术实现一个简单的购物车程序

    实验二   JSP编程 一.实验目的1. 掌握JSP指令的使用方法:2. 掌握JSP动作的使用方法:3. 掌握JSP内置对象的使用方法:4. 掌握JavaBean的编程技术及使用方法:5. 掌握JSP ...

  2. 使用MongoDB和JSP实现一个简单的购物车系统

    目录 1 问题描述  2 解决方案  2.1  实现功能  2.2  最终运行效果图  2.3  系统功能框架示意图  2.4  有关MongoDB简介及系统环境配置  2.5  核心功能代码讲解  ...

  3. 利用ANTLR4实现一个简单的四则运算计算器

    利用ANTLR4实现一个简单的四则运算计算器 ANTLR4介绍 ANTLR能够自动地帮助你完成词法分析和语法分析的工作, 免去了手写去写词法分析器和语法分析器的麻烦 它是基于LL(k)的, 以递归下降 ...

  4. 利用jmeter做一个简单的性能测试并进行参数化设置

    1.新增一个线程组,并在下面添加基本原件,包括:监听器.http请求默认值和一个事务控制器 在http请求默认值中填写 ip 地址和端口号,协议类型默认为http 2.添加代理服务器,以便之后进行录制 ...

  5. 利用 nodeJS 搭建一个简单的Web服务器（转）

    下面的代码演示如何利用 nodeJS 搭建一个简单的Web服务器: 1. 文件 WebServer.js: //-------------------------------------------- ...

  6. JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

    编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...

  7. Java中的策略模式，完成一个简单地购物车，两种付款策略实例教程

    策略模式是一种行为模式.用于某一个具体的项目有多个可供选择的算法策略,客户端在其运行时根据不同需求决定使用某一具体算法策略. 策略模式也被称作政策模式.实现过程为,首先定义不同的算法策略,然后客户端把 ...

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

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

  9. 利用java实现一个简单的远程监控程序

    一般的远程监控软件都是用c或者c++等语言开发的,而使用java如何来实现相同的功能呢. 首先我们先介绍一下一个简单的远程监控程序的实现原理. 功能一,远程屏幕监视 (1) 必须要有监控端与被监控端, ...

随机推荐

  1. Github history viewer

    Github history viewer https://github.githistory.xyz/ https://github.com/pomber/git-history https://c ...

  2. parcel bug & not support normal import React & ReactDOM module

    bug report not support normal import React & ReactDOM module, why Code Sample OK import * as Rea ...

  3. SVG & getBBox

    SVG & getBBox https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox const ...

  4. NGK发力社区 打造三大社群模式

    当人们谈论区块链.数字货币的时候,常常会提到这样一些词汇:社区.社群,社区对区块链项目乃至于整个区块链行业的重要性已经形成了基本的行业共识,几乎每个项目方都在想尽办法营造社区.激发社区活力. 为什么区 ...

  5. java数据类型（基础篇）

    public class note02 { public static void main(String[] args) { //八大基本数据类型 //1.整数 byte num1 = 1; shor ...

  6. CF102920L Two Buildings【分治】【决策单调性】

    优秀的分治题目.是"2020-2021 ACM-ICPC, Asia Seoul Regional Contest"的一道题. Description There are \(n\ ...

  7. 如何用python自动编写《赤壁赋》word文档

    目录 前言 安装-python-docx 一.自动编写<赤壁赋> 准备数据 新建文档 添加标题 添加作者 添加朝代 添加图片 添加段落 保存word文档 二.自动提取<赤壁赋> ...

  8. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  9. 顶级c程序员之路 基础篇 - 第一章 关键字的深度理解 number-1

    c语言有32个关键字,每个关键字你都理解吗? 今天出场的是: auto ,  register,  static,   extern 为什么他们会一起呢,说到这里不得不谈到c语言对变量的描述. c给每 ...

  10. SpringBoot(一):使用IDEA快速搭建一个SpringBoot项目（详细）

    环境: JDK1.8   Maven:3.5.4 1.打开IDEA,右上角选择File→New→Project 选择Spring Initializr(使用IDEA自带的插件创建需要电脑联网) 2.点 ...