菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码:
点击运行
保存
<!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{color:#5e5b64;text-align:center;} a, a:visited {text-decoration:none;outline:none;color:#389dc1;} section, footer, header, aside, nav{display:block;} form{background-color:#61a1bc;border-radius:2px;box-shadow:0 1px 1px #ccc;width:350px;padding:35px 60px;margin:50px auto;} form h1{color:#fff;font-size:35px;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 10px;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 数组 设置选项点击后的样式 --> <li v-for="service in services" v-on:click="toggleActive(service)" v-bind:class="{ 'active':service.active}"> <!-- 显示订单中的服务名 价格Vue 定义了货币过滤器 用于格式化价格 --> {{service.name}} <span>{{service.price | currency}}</span> </li></ul> <div class="total"><!-- 计算所有服务的价格,并格式化货币 --> Total:<span>{{total() | currency}}</span> </div></form><script> Vue.filter('currency', function (value) {// 自定义过滤器 "currency". 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>
运行结果