【Vue】如何巧妙使用computed Vue

前言：watch是个很实用的属性。不但可以用来监听form标签值的变化，还可以用来监听对象属性的变化。

一、案例一

test - 锐客网是否已经全选是否{{item.name}}

运行结果

文章图片

二、案例二

test - 锐客网table { width:100%; } td { text-align:center; } input { width:50px; text-align:center; } span { color:red; } .total { margin-top:50px; text-align:center; } 商品单价数量金额 {{item.name}} ￥{{item.price}} ￥{{item.price*item.num}} 总金额为￥{{ totalPrice }}

商品	单价	数量	金额
{{item.name}}	￥{{item.price}}		￥{{item.price*item.num}}

运行结果

文章图片

三、将案例一跟案例二合并

test - 锐客网table { width:100%; } td { text-align:center; } td:first-child,th:first-child { text-align:left; } input { width:50px; text-align:center; } span { color:red; } .total { margin-top:50px; text-align:center; } 全选商品单价数量金额 {{item.name}} ￥{{item.price}} ￥{{item.price*item.num}} 总金额为￥{{ totalPrice }}