Vue.js實現(xiàn)價格計算器功能

更新時間：2020年03月30日 10:09:14 作者：Dragonir

這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)價格計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue.js實現(xiàn)價格計算器功能的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)效果：

實現(xiàn)代碼及注釋：

<!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">
 
 /* 隱藏未編譯的數(shù)據(jù)綁定，直到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隱藏所有沒有編譯過的數(shù)據(jù)綁定，直到vue實例準備好 -->
 
<form id="main" v-cloak>
 <h1>價格計算器</h1>
 <ul>
 
 <!-- 循環(huán)這個服務數(shù)組，分配一個點擊句柄，并且設置或移除active class -->
 <li v-for="service in services" v-on:click="toggleActive(service)" v-bind:class="{'active': service.active}">
 
 <!-- 顯示這個數(shù)組中每個實體的名稱和價格格式化， Vue有一個內(nèi)置的貨幣篩選器用于對價格進行 -->
 
 {{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">
 
 // 定義一個常規(guī)過濾器currency
 Vue.filter('currency', function(value){
 return '￥' + value.toFixed(2);
 });
 
 var demo = new Vue({
 el: '#main',
 data: {
 // 定義model屬性，view將會循環(huán)
 // 通過services數(shù)組產(chǎn)生一個li
 // 定義services每一項的元素
 
 services: [
 {
  name: "網(wǎng)站開發(fā)",
  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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: