|
|
本文参考《精通Vue.js：Web前端开发技术详解》，作者：孙卫琴，清华大学出版社出版
对于购物网站应用，需要在前端管理购物车。购物车中包含了所选购的商品的名字、数量、单价和小计（数量*单价）的信息，还包含了所有选购商品的总金额的信息。用户可以修改选购商品的数量，还可以删除选购的商品。
例程1的shoppingcart.html实现了购物车。cartItems数组变量表示用户选购的所有商品条目。在模板中通过v-for指令来遍历cartItems数组变量：| <tr v-for="(item,index) in cartItems">……</tr> |
cartItems数组中的每个商品条目表示一个商品的具体购买信息，在购物车网页上会显示商品的具体购买信息：
（1）序号：{{index+1}}
（2）名称：{{item.name}}
（3）价格：{{ currency(item.price,2) }}
（4）数量：{{item.count}}
（5）小计：{{ currency(item.count*item.price,2) }}
以上currency()方法用于对金额数字进行格式化，保留两位小数，并且会在数字开头加上货币符号“￥”。
在遍历了cartItems数组中的所有商品后，还会在网页上显示所有选购商品的总金额：
| 总金额：{{ currency( total,2 ) }} |
以上total是计算属性，它的定义如下：
computed:{
total(){ //计算属性total表示总金额
var sum=0;
for(let i=0;i<this.cartItems.length;i++){
sum+=parseFloat(this.cartItems[i].price)
*parseFloat(this.cartItems[i].count)
}
return sum
}
} |
以上total()函数遍历cartItems数组变量，计算所有选购商品的总金额。由于total()函数依赖cartItems数组变量，因此当用户在网页上修改了cartItems数组变量中商品的购买数量，或者删除了某个商品时，Vue框架就会调用total()函数，从而同步更新total计算属性的值。
例程1 shoppingcart.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script src="vue.js"></script>
</head>
<body>
<div id="cart">
<table border="1" width="600" style="margin: 0 auto;">
<tr>
<th>序号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in cartItems">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{ currency(item.price,2) }}</td>
<td>
<!-- 递增数量的按钮 -->
<button v-on:click="item.count<=0?0:item.count-=1">
-
</button>
<!-- 设置数量的输入框 -->
<input type="text" v-model.number="item.count"
@keyup="item.count=item.count<=0?0:item.count"/>
<!-- 递减数量的按钮 -->
<button v-on:click="item.count+=1">+</button>
</td>
<td>{{ currency(item.count*item.price,2) }}</td>
<td>
<button @click="remove(index)">移除</button>
</td>
</tr>
<tr>
<td colspan="6" align="right">
总金额：{{ currency( total,2 ) }}
</td>
</tr>
</table>
</div>
<script>
const vm= Vue.createApp({
data() {
return {
cartItems:[
{id:10001,name:'足球',price:105.5,count:10},
{id:10002,name:'跳绳',price:8.8,count:2},
{id:10003,name:'呼啦圈',price:21.6,count:5},
]
}
},
computed:{
total(){ //total计算属性表示总金额
var sum=0;
for(let i=0;i<this.cartItems.length;i++){
sum+=parseFloat(this.cartItems[i].price)
*parseFloat(this.cartItems[i].count)
}
return sum
}
},
methods:{
remove(index){ //删除购物车的一个商品
if(confirm('你确定要删除吗?')){
this.cartItems.splice(index,1)
}
},
//对金额进行格式化
//参数v表示需要格式化的金额
//参数n表示需要保留的小数位数
currency(v,n){
if(!v){ //如果v为空，就退出
return ""
}
//增加货币符号"￥"，并且保留n位小数，默认保留2位小数
return "￥"+v.toFixed(n||2)
}
}
}).mount('#cart')
</script>
</body>
</html> |
通过浏览器访问shoppingcart.html，会得到如图1所示的购物车网页。
图1 shoppingcart.html的网页
在shoppingcart.html的网页上增加或删除某个商品的数量，总金额以及小计会同步更新。如果移除某个商品，总金额也会同步更新。
shoppingcart.html同时运用了插值表达式、方法和计算属性。从这个范例也可以总结出这些方式的使用场合：
（1）对于简单的运算表达式，可以使用插值表达式，比如用{{ currency(item.count*item.price,2) }}表示商品的小计金额。
（2）如果运算逻辑复杂，并且运算过程不通用，可以使用计算属性，例如用total计算属性表示总金额。
（3）如果运算逻辑复杂，并且运算过程很通用，可以使用方法。例如用currency()方法对金额数字进行格式化。它的参数可以是商品单价、小计金额和总金额。
从语义上来区分，计算属性具有特定的属性特征，例如total计算属性表示总金额。而方法实现了通用的运算功能，例如currency()方法可以对所有金额数字进行通用的格式化。
程序猿的技术大观园：www.javathinker.net
[这个贴子最后由 sunweiqin 在 2022-08-30 11:40:29 重新编辑]
|
|
Java技术网站 → 『 Java开发技术 』 → 『 孙卫琴姐姐的Java技术专栏 』 → 【Vue专题】Vue3的计算属性实用范例：实现购物车
消息
查看
搜索
好友
邮件
复制
引用
IP: 已设置保密
