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学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
JS判断对象是否存在的10种方法总结
Dec 23 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 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
UCenter Home二次开发指南
2009/05/28 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
2016/12/26 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
python中ConfigParse模块的用法
2014/09/29 Python
浅述python中深浅拷贝原理
2018/09/18 Python
pandas.cut具体使用总结
2019/06/24 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
Python函数参数分类原理详解
2020/05/28 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
如何让Java程序执行效率更高
2014/06/25 面试题
经典c++面试题五
2014/12/17 面试题
前台接待员岗位职责
2014/01/02 职场文书
中班开学寄语
2014/04/04 职场文书
普通话演讲稿
2014/09/03 职场文书
质检员岗位职责
2015/02/03 职场文书
2016年情人节广告语
2016/01/28 职场文书
python析构函数用法及注意事项
2021/06/22 Python
Python基于百度AI实现抓取表情包
2021/06/27 Python
Django基础CBV装饰器和中间件
2022/03/22 Python