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.js之生命周期，防止闪烁，计算属性的使用，vue实例简单方法和循环重复数据
摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...
- Vue的简单入门
Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...
- 98、vue.js简单入门
本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...
- Vue.js-05：第五章 - 计算属性与监听器
一.前言 在 Vue 中,我们可以很方便的将数据使用插值表达式( Mustache 语法)的方式渲染到页面元素中,但是插值表达式的设计初衷是用于简单运算,即我们不应该对差值做过多的操作.当我们需要对差 ...
- 13、vue.js简单入门
本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...
- 沉淀，再出发：VUE的简单理解
沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...
- 3-5 编程练习：jQuery实现简单的图片对应展示效果
3-5 编程练习:jQuery实现简单的图片对应展示效果 通过这个章节的学习, 老师带领大家完成了一个基本的图片切换特效,接下来,我们也实现一个类似的效果,点击相应的按钮,切换对应的图片. 效果图 : ...
- VUE实现简单的全选/全不选
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- vue超简单加载字体方法,解决scss难加载字体的问题
vue超简单加载字体方法,解决scss难加载字体的问题 scss在加载字体方面一直不太好用,需要繁杂的配置才能达到想要的效果,这里说一种非常简单的方法 在App.vue的style标签下引入字体文件后 ...
随机推荐
- Python连载54-FTP编程
一.FTP工作流程 1.客户端链接远程主机上的FTP服务器 2.客户端输入用户名和密码(或者“anonymous”和电子邮件地址) 3.客户端和服务器进行各种文件传输和信息查询操作 4.客户端从远程F ...
- Vue小练习 02
用table标签渲染下面的数据, 最后一列为总分, 第一列为排名 scores = [ {name: 'Bob', math: 97, chinese: 89, english: 67}, {name ...
- Linux中，Tomcat 怎么承载高并发（深入Tcp参数 backlog）
一.前言 这两天看tomcat,查阅 tomcat 怎么承载高并发时,看到了backlog参数.我们知道,服务器端一般使用mq来减轻高并发下的洪峰冲击,将暂时不能处理的请求放入队列,后续再慢慢处理.其 ...
- Jmeter元件——JSON Extractor后置处理器介绍2
在前段时间将JSON Extractor元件做了个简单的介绍:Jmeter元件——JSON Extractor后置处理器介绍1,今天以一个具体的json,以不同的方式提取数据做个详细的介绍. 一.模拟 ...
- C#斐波那契数列求法（比较阶乘和循环所用时间）
using System; namespace ConsoleApp3 { class Program { static void Main(string[] args) { Console.Writ ...
- C#中类的修饰符
Q&A 项目=程序集=assembly 1,Q:类的修饰符有哪些? A: 有 new.public.protect.internal.private.abstract.sealed.st ...
- Selenium(二)：选择元素的基本方法
1. 选择元素的基本方法 对于百度搜索页面,如果我们想自动化输入爱编程的小灰灰,怎么做呢? 这就是在网页中,操控界面元素. web界面自动化,要操控元素,首先需要选择界面元素 ,或者说定位界面元素 就 ...
- SSH框架之Struts2第一篇
1.2 Struts2的概述 : Struts2是一个基于MVC设计模式的WEB层的框架. 1.2.1 常见web层框架 Struts1,Struts2,WebWork,SpringMVC Strut ...
- 你看不懂的spring原理是因为不知道这几个概念
背景 问题从一杯咖啡开始. 今天我去楼下咖啡机买了一杯「粉黛拿铁」.制作过程中显示: 我取了做好的粉黛拿铁,喝了一口,果然就是一杯热巧克力.咦咦咦,说好的拿铁呢?虽然我对「零点吧」的咖啡评价很高,觉得 ...
- JS基础语法----Math对象
推荐查看MDN----在线的帮助文档 实例对象: 通过构造函数创建出来,实例化的对象 静态对象: 不需要创建,直接就是一个对象,方法(静态方法)直接通过这个对象名字调用 实例方法必须通过实例对 ...