利用Vue实现一个简单的购物车功能

开始学习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中的属性，在计算结果发生改变时，结果会动态地发生改变

原文地址：https://www.cnblogs.com/pyb-1205/p/14629214.html