computed 计算属性

正则

css部分

[v-cloak] {

	display : none ;

}

table{

	border : lpx solid #e9e9e9 ;

	border- collapse: collapse ;

	border-spacing : 0;

	empty-cells : show ;

}

th , td{

	padding : Spx 16px ;

	border : lpx solid #e9e9e9 ;

	text-align : left;

}

th{

	background: #f7f7f7 ;

	color : #5c6b77 ;

	font-weight: 600 ;

	wh te-space: nowrap ;

}

.checks {

  font-size: 16px;

  text-align: center;

}

　　

Js部分

var app = new Vue({
el: '#app',
data:{
checkall: false,
list:[
{
title_name: '手机',
content: [
{ id: 1, name: '小米9', price: 3099, count: 9, check: false,
},
{ id: 2, name: '华为30', price: 4888, count: 1, check: false,
},
{ id: 3, name: 'Vivo20', price: 3199, count: 1, check: false,
},
]
},
{
title_name: '日常用品',
content: [
{ id: 1, name: '牙刷', price: 88, count: 1, check: false,
},
{ id: 2, name: '毛巾', price: 58, count: 1, check: false,
},
{ id: 3, name: '口杯', price: 28, count: 1, check: false,
},
]
},
{
title_name: '学习用品',
content: [
{ id: 1, name: '签字笔', price: 18, count: 1, check: false,
},
{ id: 2, name: '橡皮', price: 8, count: 1, check: false,
},
{ id: 3, name: '笔记本', price: 2, count: 1, check: false,
},
]
},
],
},
computed:{
totalPrice: function(){
var total = 0;
for( var i = 0; i < this.list.length; i++){
var item = this.list[i];
for(var j = 0; j<item.content.length; j++){
var items = item.content[j];
if(items.check === true){
total += items.price * items.count;
}
}
}
return total.toString().replace(/\B(?=(\d{3})+$)/g,','); //3位式显示金额
},
},
methods:{
handleReduce: function(index1, index2){
if(this.list[index1].content[index2].count === 1) return; //商品数量等于‘1’时，关闭按钮
this.list[index1].content[index2].count--; //商品数量减一
},
handleAdd: function(index1, index2){
this.list[index1].content[index2].count++; //商品数量加一
},
handleRemove: function(index1, index2){
this.list[index1].content.splice(index2, 1);
},
handleChecked:function(index1,index2){
this.list[index1].content[index2].check = !this.list[index1].content[index2].check
if(this.list[index1].content[index2].check === false){
this.checkall = false;
};
var checkallkey = true;
for(var i=0;i<this.list.length;i++){
for(var j=0;j<this.list[i].content.length;j++){
if(this.list[i].content[j].check === false) checkallkey = false;
}
}
this.checkall = checkallkey;
},
handleAllChecked: function(){ //全选 or 取消全选
if(this.checkall === false){
for(var i=0; i<this.list.length; i++){
for(var j=0; j<this.list[i].content.length; j++){
this.list[i].content[j].check = true;
}
}
this.checkall = true;
}
else if(this.checkall === true){
for(var i=0; i<this.list.length; i++){
for(var j=0; j<this.list[i].content.length; j++){
this.list[i].content[j].check = false;
}
}
this.checkall = false;
}
},
},
});

　　

HTML 部分

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>购物车实战</title>

		<link rel="stylesheet" type="text/css" href="css/style.css"/>

		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

	</head>

	<body>

		<div id="app" v-cloak>

			<template v-if="list.length">

				<!-- <template>里的代码分两部分， 一部分是商品列表信息，我们用表格 table 来展现：

				另一部分就是带有千位分隔符的商品总价（每隔三位数加进一个逗号〉。这部分代码如下： -->

				<table border="" cellspacing="" cellpadding="">

					<thead>

						<tr>

							<th><input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()" /></th>

							<th>商品编号</th>

							<th>商品价格</th>

							<th>商品单价</th>

							<th>购买数量</th>

							<th>操作</th>

						</tr>

					</thead>

					<tbody>

						<!-- 循环list -->

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

							<td><input type="checkbox" :value="item" v-model="checkedData" /></td>

							<td>{{ index + 1 }}</td>

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

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

							<td>

								<button @click="handleReduce(index)"

								:disabled="item.count === 1">-</button>

								{{ item.count }}

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

							</td>

							<td>

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

							</td>

						</tr>

					</tbody>

				</table>

				<div class="checks">

					<div>总价:¥ {{ totalPrice }}</div>

					<br>

				      <span >

						  选择的值为:

						  <tr >

							 <td>{{ checkedData }}</td>

						  </tr>

				      </span>

				    </div>

			</template>

			<div v-else>购物车空了，添加一些商品吧</div>

		</div>

		<!-- 注意，这里将vue.min. js ,index.js

		文件写在＜body 的最底部，如果写在＜head＞里 Vue 实例将无法创建，

		因为此时 DOM 还没有被解析完成，除非通过异步或在事件

		DOMContentLoaded (IE 是onreadystatechange ）

		触发时再创建 Vue 实例，这有点像 jQuery 的$（document).ready（）方法。 -->

		<script src="https://unpkg.com/vue/dist/vue.js"></script>

		  <!-- import JavaScript -->

		  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

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

	</body>

</html>

　　

Vue-购物车实战的更多相关文章

  1. vue购物车实战项01

    1. 关于挂载点 2.图片路径 这样的引入方式 是直接文件夹下myVue 3.import 不能用绝对路径 只能用相对路径  图片可以绝对路径 4.引入组件步骤 1.引入组件  @的含义在配置里面可以 ...

  2. vue购物车实战项02

    1.数据循环.绑定 v- 绑定的属性 都是变量 ( 小程序这块需要花括号 不同点) 2.列表点击 当绑定变量为一个对象的时候{} 属性根据里面的属性值 bool 值  是否返回 当前的属性 转化成cl ...

  3. vue.js实战——购物车练习（包含全选功能）

    vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...

  4. vue项目实战, webpack 配置流程记录

    vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...

  5. webpack+vue项目实战（四，前端与后端的数据交互和前端展示数据）

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

  6. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  7. 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站

    这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...

  8. vue.js 实战 todo list

    vue.js 起源 vue.js 的作者是尤雨溪,是一名中国人,之前在谷歌工作,现在在全职维护 vue 项目. vue.js 是 2014 年推出来的.现在已经更新到 2.x 版本,3.0 版本会在 ...

  9. vue前端实战注意事项

    1. vue前端实战注意事项 1.1. 预备 1.1.1. Eslint 这是个语法检查工具,我用webstorm作为开发的ide,这个语法检查还是太严格了,一个空格啥的都会报错,对新手来讲还是建议关 ...

  10. vue项目实战

    本篇文章主要介绍了vue的环境配置,vue项目的目录结构以及在开发vue项目中问题的一些解决方案. 环境配置及目录结构 1.安装node.js(http://www.runoob.com/nodejs ...

随机推荐

  1. 使用GET方法访问网站

    使用GET方法访问网站 服务器接收get参数 server.py import flask app = flask.Flask(__name__) @app.route('/') def index( ...

  2. Tarjan 求有向图的强连通分量

    重温Tarjan, 网上看了许多博客感觉都讲的不清楚. 故传上来自己的笔记, 希望帮到大家. 提到的一些概念可以参考 oi wiki, 代码也是 oi wiki 的, 因为我不认为我能写出比大佬更好的 ...

  3. Vim有哪几种模式？

    Vim有哪几种模式? 模式一:normal模式 作用主要是用来浏览,输入各种和在文档中移动. 模式二:编辑模式 用于对文件的编辑: 常用的插入命令: a在光标位置后编辑, i在光标位置前编辑, o在下 ...

  4. ​Chrome插件：Postman Interceptor 调试的终极利器

    今天给大家介绍一款非常实用的工具--Postman Interceptor. 这个工具可以捕捉任何网站的请求,并将其发送到Postman客户端. 对于经常和API打交道的程序员来说,Postman I ...

  5. 【路径规划】 The Dynamic Window Approach to Collision Avoidance (附python代码实例)

    引用与前言 参考链接 引用参考如下: 博客园解释:https://www.cnblogs.com/dlutjwh/p/11158233.html 这篇博客园写的贼棒!我当时就是一边对着论文一边对着他这 ...

  6. 是什么导致了客户端TCP连不上服务器？

      这几年做了很多基于 GGTalk开源即时通讯系统 的定制开发项目,经常会碰到如下两个问题,分享出来,应该对大家会有所帮助: (1)定制开发完成后,在给客户部署GGTalk即时通讯服务端到正式的服务 ...

  7. 【Zabbix】Zabbix5.0安装部署问题汇总

    报错信息:No package 'oniguruma' found 解决方法:https://www.limstash.com/articles/202003/1563 报错信息: PHP bcmat ...

  8. Spring里面bean的生命周期里面的init和destroy方法

    package net.cybclass.sp; import net.cybclass.sp.domain.Video; import net.cybclass.sp.domain.Video2; ...

  9. 大一新生的作业（洛谷P1150，1035，1075）

    本帖背景:此帖讲解大一新生团队作业 截止日期10-31 17:09 P1150(Peter的烟) 算法简介 本题主要考察的是模拟算法 模拟算法一般考察一些比较基础的题目,它将生活中的实例融合到了编程题 ...

  10. CM3调试系统简析

    CM3 调试系统简析 **"一直以来,单片机的调试一直不是很突出的主题,很多简单些的程序在开发中,甚至都没有调试的概念,而只是把生成的映像直接烧入片子,再根据错误症状来判断问题,然后修改程序 ...