Vue.js_实例_订单列表

最新推荐文章于 2024-09-02 10:17:00 发布

徐小硕

最新推荐文章于 2024-09-02 10:17:00 发布

阅读量1.3k

点赞数 2

分类专栏： Vue_实例案例文章标签： vue.js 过滤器 css

本文链接：https://blog.youkuaiyun.com/qq_40601005/article/details/106047214

版权

Vue_实例案例专栏收录该内容

4 篇文章

订阅专栏

下面做了一个商品订单列表的页面，对商品进行选择并进行价格合计的计算。

对新学习vue的同学可以作为小练习进行训练。

运行截图如下：

代码中使用了axios.js来实现对数据的异步操作。

axios.js链接：axios.min.js

下面是代码部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue_实例_订单列表</title>
		<script src="../vue/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../vue/axios.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- v-cloak隐藏未编译的变量，直到vue实例准备就绪 -->
		<form id="main" v-cloak>
			<h3>订单列表</h3>
			<ul>
				<!-- 循环输出订单数组，设置选项点击后的样式-->
				<li v-for="service in services" v-on:click="toggleActive(service)" v-bind:class="{'active':service.active}">
					<!-- 显示订单中的服务名，价格
					vue.js中定义了货币过滤器，用于格式会价格 -->
					{{service.name}}<span>{{service.price | currency}}</span>
				</li>
			</ul>
			<div class="total">
				<!-- 计算所有服务的价格，并格式化货币 -->
				总价：<span>{{total() | currency}}</span>
			</div>
		</form>
		<script type="text/javascript">
			//自定义过滤器“currency”
			Vue.filter('currency', function(value) {
				return  value.toFixed(2) + '￥';
			})
			var demo = new Vue({
				el: '#main',
				data() {
					//定义模型属性
					//视图将循环输出数组的数据
					return {
						services: []
					}
				},
				methods: {
					toggleActive: function(s) {
						s.active = !s.active;
					},
					/* 计算总价的方法 */
					total: function() {
						var total = 0;
						this.services.forEach(function(s) {
							if (s.active) {
								total += s.price;
							}
						});
						return total;
					}
				},
				/*axios 异步加载json数据 
					mounted()钩子函数一般用来向后端发起请求，拿到数据后做一些业务处理。
					该函数在模版渲染完成后才被调用
				*/
				mounted() {
					axios.get('../data/goodsData.json')
						.then(function(res) {
							demo.services = res.data
						}).catch(function(error) {
							console.log(error);
						});
				}
			})
		</script>
	</body>
</html>

下面是css样式代码：

	[v-cloak] {
				display: none;
			}

			* {
				margin: 0;
				padding: 0;
			}

			body {
				font: 15px/1.3 'Open Sans', sans-serif;
				color: #5e5b64;
				text-align: center;
			}

			a,
			a:visited {
				outline: none;
				color: #389dc1;
			}

			a:hover {
				text-decoration: none;
			}
			/*-------------------------
			    	订单表单
			    --------------------------*/

			form {
				background-color: #61a1bc;
				border-radius: 2px;
				box-shadow: 0 1px 1px #ccc;
				width: 400px;
				padding: 35px 60px;
				margin: 30px auto;
			}

			form h3 {
				color: #fff;
				font-size: 32px;
				font-family: 'Cookie', cursive;
				font-weight: normal;
				line-height: 1;
				text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
			}

			form ul {
				list-style: none;
				color: #fff;
				font-size: 16px;
				font-weight: bold;
				text-align: left;
				margin: 14px 0 15px;
			}

			form ul li {
				padding: 12px 30px;
				background-color: #e35885;
				margin-bottom: 8px;
				box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
				cursor: pointer;
			}

			form ul li span {
				float: right;
			}

			form ul li.active {
				background-color: #8ec16d;
			}

			div.total {
				border-top: 1px solid rgba(255, 255, 255, 0.5);
				padding: 15px 30px;
				font-size: 20px;
				font-weight: bold;
				text-align: left;
				color: #fff;
			}

			div.total span {
				float: right;
			}

本实例整体结构还是比较简单的，其中使用了一个自定义过滤器(Vue.filter)，来过滤价格数据，保留两位小数。

方法中写了一个“total”方法，计算被选中商品价格的总价，利用forEach()函数进行遍历计算。

mounted（）钩子函数中使用axios.js来对数据进行异步加载。