Vue.js订单列表--菜鸟教程实例

最新推荐文章于 2024-08-04 12:47:40 发布

Langgggggggg

最新推荐文章于 2024-08-04 12:47:40 发布

阅读量708

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_52254640/article/details/109760208

版权

本文档详细介绍了如何使用Vue.js来创建一个订单列表，通过菜鸟教程的实例，读者将学习到Vue.js组件化开发、数据绑定和事件处理等核心概念。

摘要由CSDN通过智能技术生成

Vue.js订单列表–菜鸟教程实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue.js 订单表单</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <style>
    /*  隐藏未编译的变量 */

    [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;
    }

    section, footer, header, aside, nav{
    	display: block;
    }

    /*-------------------------
    	订单表单
    --------------------------*/

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

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

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

    form ul li{
    	padding:20px 30px;
    	background-color:#e35885;
    	margin-bottom:8px;
    	box-shadow:0 1px 1px rgba(0,0,0,0.1);
    	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;
    }
    </style>

</head>
<body>

<!-- v-cloak 隐藏未编译的变量，直到 Vue 实例准备就绪。 -->

<form id="main" v-cloak>

	<h1>Services</h1>

	<ul>

		<!-- 循环输出 services 数组, 设置选项点击后的样式 --> <!-- v-on点击来改变被选中的状态，v-bind绑定active的值 -->

		<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">

		<!-- 计算所有服务的价格，并格式化货币 -->

		Total: <span>{{total() | currency}}</span>
        
	</div>

</form>
<script>

// 自定义过滤器 "currency". 
Vue.filter('currency', function (value) {
    return '$' + value.toFixed(2);  //保留小数点后两位
});

var demo = new Vue({
    el: '#main',
    data: {
    	// 定义模型属性 the model properties. The view will loop
        // 视图将循环输出数组的数据
        services: [
        	{
        		name: 'Web Development',
        		price: 300,
        		active:true
        	},{
        		name: 'Design',
        		price: 400,
        		active:false
        	},{
        		name: 'Integration',
        		price: 250,
        		active:false
        	},{
        		name: 'Training',
        		price: 220,
        		active:false
        	}
        ]
    },
    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;
        }
    }
});
	
</script>
</body>
</html>