效果图：

使用技术：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实现简单的列表金额计算效果（简易购物车）的更多相关文章

  1. vue.js之生命周期，防止闪烁，计算属性的使用，vue实例简单方法和循环重复数据

    摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...

  2. Vue的简单入门

    Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...

  3. 98、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  4. Vue.js-05：第五章 - 计算属性与监听器

    一.前言 在 Vue 中,我们可以很方便的将数据使用插值表达式( Mustache 语法)的方式渲染到页面元素中,但是插值表达式的设计初衷是用于简单运算,即我们不应该对差值做过多的操作.当我们需要对差 ...

  5. 13、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  6. 沉淀，再出发：VUE的简单理解

    沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...

  7. 3-5 编程练习：jQuery实现简单的图片对应展示效果

    3-5 编程练习:jQuery实现简单的图片对应展示效果 通过这个章节的学习, 老师带领大家完成了一个基本的图片切换特效,接下来,我们也实现一个类似的效果,点击相应的按钮,切换对应的图片. 效果图 : ...

  8. VUE实现简单的全选/全不选

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. vue超简单加载字体方法,解决scss难加载字体的问题

    vue超简单加载字体方法,解决scss难加载字体的问题 scss在加载字体方面一直不太好用,需要繁杂的配置才能达到想要的效果,这里说一种非常简单的方法 在App.vue的style标签下引入字体文件后 ...

随机推荐

  1. mysql 事务四要素杂谈

    事务四要素 对于数据库来说,并发性和准确性是数据库需要权衡的两个点. 类似于我们的应用系统,又要要性能还要要准确. 数据准确性这一条来说,最好的控制就是串行化,都别急,一个一个来.这样数据就没问题了. ...

  2. 软件文档写作-plantuml画用例图和时序图

    背景 当下的软件开发人员,不可避免的需要输出一些软件设计文档,作为一个软件工程专业毕业的工程师,最常用的设计工具就是UML,使用UML工具绘制一些软件相关的图,是必备技能,也是输出的技术文档中的重要组 ...

  3. Web安全测试学习笔记-DVWA-图片上传

    很多网站都有上传资源(图片或者文件)的功能,资源上传后一般会存储在服务器的一个文件夹里面,如果攻击者绕过了上传时候的文件类型验证,传了木马或者其他可执行的代码上去,那服务器就危险了. 我用DVWA的文 ...

  4. 利用Python进行数据分析-Pandas(第七部分-时间序列)

    时间序列(time series)数据是一种重要的结构化数据形式,应用于多个领域,包括金融学.经济学.生态学.神经科学.物理学等.时间序列数据的意义取决于具体的应用场景,主要有以下几种: 时间戳(ti ...

  5. PHP目前常见的五大运行模式

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/xujingzhong0077/artic ...

  6. intelj idea中除了Find Usage外的另一种查找级联调用的方法

    一.方法 平时都是使用find usage来找一个方法的引用的地方,但是只能查看一级,今天偶然发现个查看多级的办法: 在源码编辑界面:

  7. java架构之-负载均衡-Ribbon 的使用

    一. 什么是负载均衡负载均衡就是分发请求流量到不同的服务器.负载均衡一般分为两种:1. 服务器端负载均衡(nginx) 2. 客户端负载均衡(Ribbon) 二. spring- - cloud- - ...

  8. 常用类-Excel-使用Aspose.Cells插件

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Xm ...

  9. Scss换肤

    项目中虽然没有一键换肤的要求,但是产品要求后期能换主题.在开发组件中涉及到主题的地方,要提取一些公用的变量,不要直接写死样式值.但是如果只是定义一些变量的话,只是完成控制颜色等值的提取.后期切换的话需 ...

  10. easyui-datagrid 使用笔记

    1.清空所有行和所有列 $('#dgJGQuery').datagrid({ columns: [], url: '', data: [] }); 2.采用 datagrid-groupview 分组 ...