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 相关文章推荐
xml和web特殊字符
Apr 28 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
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
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
js控制div及网页相关属性的代码
2009/12/19 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
jQuery实现简单聊天室
2020/02/08 jQuery
基于postman获取动态数据过程详解
2020/09/08 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
Python中的map、reduce和filter浅析
2014/04/26 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
导致python中import错误的原因是什么
2020/07/01 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
在购买印度民族服饰:Soch
2020/09/15 全球购物
公司行政经理岗位职责
2013/12/24 职场文书
活动总结模板
2014/05/09 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
python可视化之颜色映射详解
2021/09/15 Python