<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { border-collapse: collapse; border: 1px red solid; } th, td { width: 300px; text-align: center; border: 1px red solid; } td img { width: 100px; height: 100px; } input{ width: 30px; text-align: center; } a{ text-decoration: none; } </style></head><body> <div id="app"> <table> <tr> <th>物品</th> <th>图片</th> <th>价格</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> <tr v-for="(item,i) in list"> <td> <a :href="'/detail.html?id='+ item.id">{{item.name}}</a> </td> <td> <img :src="item.img" alt=""> </td> <td>{{item.price.toFixed(2)}}</td> <td> <button :disabled="item.count===1" @click="item.count--">-</button> <input type="text" v-model="item.count" class="count" @input="checkVal($event,item)"> <button :disabled="item.count===6" @click="item.count++">+</button> </td> <td>{{(item.count*item.price).toFixed(2)}}</td> <td><button v-on:click="remove(i)">删除</button></td> </tr> </table> <h1> 总价：{{totalPrice}} </h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: "#app",//选择Vue对象节点 computed: { totalPrice(){ let total = 0 this.list.forEach(r =>{ total += r.price*r.count }) return total.toFixed(2) } }, data() { return { list: [ { id: 1, name: "草莓", img: "https://bkimg.cdn.bcebos.com/pic/8694a4c27d1ed21ba96b053fa36eddc450da3f4d?x-bce-process=image/watermark,g_7,image_d2F0ZXIvYmFpa2UyNzI=,xp_5,yp_5", price: 30, count:1 }, { id: 2, name: "桃子", img: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589265424088&di=fb1f5400154e035de19b5762588d3167&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fbaike%2Fpic%2Fitem%2F08f790529822720e397728e170cb0a46f21fab74.jpg", price: 50, count:1 }, { id: 3, name: "苹果", img: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589265424087&di=11885335d3cb7c6bda4f20ced2dbe36a&imgtype=0&src=http%3A%2F%2Ffile06.16sucai.com%2F2016%2F0427%2F754f2b8df6c6b82e4757180ec73be096.jpg", price: 150, count:1 }, { id: 4, name: "榴莲", img: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589265424086&di=e18031828c59a992dcb7b60db5ec91aa&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F03%2F44%2F35%2F5ba23076483ab_610.jpg", price: 350, count:1 }, ] } }, methods:{ checkVal(e,item){ let { value } = e.target if (!value) value = 1 if (isNaN(value)) value = 1 value = parseInt(value) if (value > 6) value = 6 if (value < 6) value = 1 item.count = value }, remove(i){ this.list.splice(i,1) }, }, }) </script></body></html>
