Vue实现简单的列表金额计算效果（简易购物车）

Posted arebirth

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue实现简单的列表金额计算效果（简易购物车）相关的知识，希望对你有一定的参考价值。

效果图：

技术图片

 

 

 

 

使用技术：v-for v-bind v-on实现简单的列表选中绑定操作

 

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <style>
            .green 
                background: greenyellow;
                border-radius: 5px;
            

            .pink 
                background: deeppink;
                border-radius: 5px;
            

            #box 
                border-radius: 5px;
                font-family: 黑体;
                width: 300px;
                height: 400px;
                background: cadetblue;
            

            .item 
                text-align: center;
                width: 240px;
                height: 40px;
                margin-top: 10px;
                line-height: 40px;
            
        </style>
    </head>
    <body>
        <div id="box" align="center">
            <h1 style="padding-top: 20px;">Services</h1>
            <div class="item s1" v-for="(item,index) in cart" v-on:click="ok(index)" v-bind:class="pink:!item.bol, green:item.bol">
                <p> item.name  ------  item.price -- item.bol </p>
            </div>
            <hr>
            <p style="float: left;margin-left: 50px;">Total:</p>
            <p style="float: right;margin-right: 50px;"> total </p>
        </div>
    </body>
</html>

<script>
    var vm = new Vue(
        el: ‘#box‘,
        data: 
            cart: [
                    name: ‘Computer‘,
                    price: 5000,
                    bol: false
                ,
                
                    name: ‘Keybord‘,
                    price: 200,
                    bol: false
                ,
                
                    name: ‘Mouse‘,
                    price: 20,
                    bol: false
                ,
                
                    name: ‘Disk‘,
                    price: 2000,
                    bol: false
                ,
            ],
            total: 0
        ,
        methods: 
            ok: function(index) 
                this.cart[index].bol = !this.cart[index].bol
                this.total = 0
                for (var i = 0; i < this.cart.length; i++) 
                    if (this.cart[i].bol)
                        this.total += this.cart[i].price
                
            
        
    )
</script>

 

以上是关于Vue实现简单的列表金额计算效果（简易购物车）的主要内容，如果未能解决你的问题，请参考以下文章

Vue+Element+computed实现购物车

vue实现CheckBox与数组对象绑定

vue 购物车练习

vue2购物车ch3-（过滤器使用 单件商品金额计算 全选全不选 总金额计算 删除商品功能）

vue简单实现购物车的全部功能

python基础--基础简易购物车程序