计算属性、指令开发Demo

<template><div id="show" v-cloak><template v-if="list.length"><table><thead><tr><th></th><th>id</th><th>商品名称</th><th>价格</th><th>购买数量</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in list"><td></td><td>{
   {index+1}}</td><td>{
   {item.name}}</td><td>{
   {item.price}}</td><td><button @click="handleReduce(index)" :disabled="item.count === 1">-</button>{
   {item.count}}<button @click="handleAdd(index)">+</button></td><td><button @click="handleRemove(index)">移除</button></td></tr></tbody></table><div>总价: {
   {totalPrice}}</div></template><div v-else>您的购物车是空的！</div></div>
</template><script>export default {name: "forDemo",data() {return {list: [{id: 1,name: "iPhone7",price: 7000,count: 1}, {id: 2,name: "iPad Pro",price: 4000,count: 15}, {id: 3,name: "xiaomi9",price: 3400,count: 5}],}},methods: {handleReduce: function (index) {if (this.list[index].count === 1) {return;}this.list[index].count--;},handleAdd: function (index) {this.list[index].count++;},handleRemove: function (index) {this.list.splice(index, 1);}},computed: {totalPrice: function () {var total = 0;for (var item of this.list) {total += item.price * item.count;}return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');}}}
</script><style scoped>[v-cloak] {display: none;}table {border: 1px solid #ccc;border-collapse: collapse;border-spacing: 0;empty-cells: show;margin: 0 auto;}th, td {padding: 8px 16px;border: 1px solid #e9e9e9;text-align: left;}th {background-color: #f7f7f7;color: #5c6b77;font-weight: 600;white-space: nowrap;}
</style>