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

实现效果：

实现代码及注释：

！DOCTYPE htmlhtmlhead标题价格计算器/title meta charset=' utf-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' style type=' text/CSS '/*隐藏未编译的数据绑定，直到某视频剪辑软件实例成功加载*/[v-斗篷]{ display : none；} * { padd : 0；保证金： 0；}车身{ font: 15px/1.3 '微软雅黑；颜色： # 545 b 64文本对齐：中心；} a，a :已访问{ outline:无；color: # 389dc1} a :悬停{ text-decoration : none}节、页脚、页眉、侧边、导航{ display: block} /* -订单- */表单{背景-颜色： # D5 D5；边框半径： 10px盒影： 0 1px 1px # CCC宽度： 400像素；padd : 35px 45pxmargin 3360 50px自动；箱形阴影： 1px 0px 20px # f5f 5；}表单h1 { color : # ffffont-size : 55px；字体系列： '微软雅黑字体粗细：正常；线高：1;text-shadow:2px 3px 0 rgba(0，0，0，0.1)；字体粗细：正常；}表单ul {列表式：无；color : # ffffont-size :20 px；字体粗细：加粗；文本-左对齐：余量：20px 0 15px}表格ul li { padding:15px 30px背景-颜色： # 03c 03 c；边距-底部：10 pxbox-shadow:0 1px 1px rgba(0，0，0，0.1)；光标：指针指针；}表格ul li span { float:right}表单ul Li。活动{背景色：橙色；} div。total { border-top :1 px solid rgba(255，255，255，0.5)；padd :15 px 30px font-size :20 px；字体粗细：加粗；文本-左对齐：color : # ffft ext-shadow : 2px 2px rgba(0，0，0，0.1)；} div。总跨度{ float : right}/风格/头像dy！v形斗篷隐藏所有没有编译过的数据绑定，直到某视频剪辑软件实例准备好-表单id=' main ' v-斗篷氕价格计算器/h1 ul！-循环这个服务数组，分配一个点击句柄，并且设置或移除active class-Li v-for=' service in service ' v-: click=' toggle active(service)' v-bind : class=' { ' active ' : service。活动的“{ 0！-显示这个数组中每个实体的名称和价格格式化，Vue有一个内置的货币筛选器用于对价格进行-{ {服务。name } } span { { service。价格|货币} }/span/Li/ul div class=' total '！-计算所有选定商品的总价格，并且格式化为货币显示方式-总价： span { { total()| currency } }/span/div/formscript src=' http :https://cdnjs。云耀斑。com/Ajax/libs/vue/2。0 .5/vue。量滴js '/script脚本类型=' text/JavaScript '//定义一个常规过滤器currency Vue.filter('currency '，function(value){ return 'value。to fixed(2)；});var demo=new Vue({ el: '#main '，data: { //定义模型属性，视图将会循环//通过服务数组产生一个li //定义服务每一项的元素服务s :[{ name : }网站开发，price: 300，active: true }，{ name: '设计，price: 400，active: false }，{ name: '一体化整合，price: 250，active: false }，{ name: '操作培训，price: 220，active: false } ] }，methods: { toggleActive:函数{ s.active=！s.active}，total : function(){ var total=0；this.services.forEach(函数){如果有效} {总价=价格；} });退货总额；} } });/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。