Vue.js实现价格计算器功能


Posted in Javascript onMarch 30, 2020

本文实例为大家分享了Vue.js实现价格计算器功能的具体代码,供大家参考,具体内容如下

实现效果:

Vue.js实现价格计算器功能

实现代码及注释:

<!DOCTYPE html>
<html>
<head>
 <title>价格计算器</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style type="text/css">
 
 /* 隐藏未编译的数据绑定,直到Vue实例成功加载 */
 [v-cloak]{
 display: none;
 }
 *{
 padding: 0;
 margin: 0;
 }
 body{
 font: 15px/1.3 "微软雅黑";
 color: #545b64;
 text-align: center;
 }
 a, a:visited{
 outline: none;
 color: #389dc1;
 }
 a:hover{
 text-decoration: none;
 }
 section, footer, header, aside, nav{
 display: block;
 }
 
 /*-------------------------
 The order form
 --------------------------*/
 
 form{
 background-color: #d5d5d5;
 border-radius: 10px;
 box-shadow: 0 1px 1px #ccc;
 width: 400px;
 padding: 35px 45px;
 margin: 50px auto;
 box-shadow: 1px 0px 20px #f5f5f5;
 }
 
 form h1{
 color:#fff;
 font-size: 55px;
 font-family: "微软雅黑"
 font-weight: normal;
 line-height:1;
 text-shadow:2px 3px 0 rgba(0,0,0,0.1);
 font-weight: normal;
 }
 
 form ul{
 list-style:none;
 color:#fff;
 font-size:20px;
 font-weight:bold;
 text-align: left;
 margin:20px 0 15px;
 }
 
 form ul li{
 padding:15px 30px;
 background-color:#03c03c;
 margin-bottom:10px;
 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: orange;
 }
 
 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;
 text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
 }
 
 div.total span{
 float:right;
 }
 </style>
 
</head>
<body>
 
<!-- v-cloak隐藏所有没有编译过的数据绑定,直到vue实例准备好 -->
 
<form id="main" v-cloak>
 <h1>价格计算器</h1>
 <ul>
 
 <!-- 循环这个服务数组,分配一个点击句柄,并且设置或移除active class -->
 <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">
 
 <!-- 计算所有选定商品的总价格,并且格式化为货币显示方式 -->
 
 总价: <span>{{total() | currency}}</span>
 </div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
<script type="text/javascript">
 
 // 定义一个常规过滤器currency
 Vue.filter('currency', function(value){
 return '¥' + value.toFixed(2);
 });
 
 var demo = new Vue({
 el: '#main',
 data: {
 // 定义model属性,view将会循环
 // 通过services数组产生一个li
 // 定义services每一项的元素
 
 services: [
 {
  name: "网站开发",
  price: 300,
  active: true
 },
 {
  name: "设计",
  price: 400,
  active: false
 },
 {
  name: "一体化整合",
  price: 250,
  active: false
 },
 {
  name: "操作培训",
  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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的单例模式 (singleton in Javascript)
Jun 11 Javascript
javscript对象原型的一些看法
Sep 19 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
vue实现在data里引入相对路径
Jun 05 Vue.js
js微信分享实现代码
Oct 11 #Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 #Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 #Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 #Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 #jQuery
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 #Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 #Javascript
You might like
php5 and xml示例
2006/11/22 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
eval的两组性能测试数据
2012/08/17 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
详解Python import方法引入模块的实例
2017/08/02 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
网游商务专员求职信
2013/10/15 职场文书
教师岗位职责范本
2013/12/29 职场文书
六年级数学教学反思
2014/02/03 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
经营目标管理责任书
2014/07/25 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
健康教育主题班会
2015/08/14 职场文书
离婚协议书范文2016
2016/03/18 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL