你题目的解答代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.tab {
border-collapse: collapse;
width: 800px;
}
.tab tr{
border: 1px solid #999;
}
.tab td{
vertical-align: top;
}
.tab img{
width: 150px;
}
.tab .price{
color: #f00;
}
.tab .total{
text-align: right;
color: #f00;
}
.val {
width: 100px;
}
</style>
</head>
<body>
<div id="app">
<table class="tab">
<tr v-for="(obj,index) in goodsList">
<td>
<img :src="obj.image" alt="" />
</td>
<td>
<h3>{{obj.goodsName}}</h3>
<p class="price">￥{{obj.price}}</p>
<calc-component v-model="obj.count"></calc-component>
</td>
</tr>
<tr>
<td class="total" colspan="2">
订单总金额: {{total}} 元
</td>
</tr>
</table>
</div>
<script>
//注册组件（请编写以下代码）
Vue.component('calc-component', {
props: ['value'],
template: `
<div>
<input type="button" value="-" @click="value--; if(value<0) value=0; $emit('input', value);" />
<input v-bind:value="value" class="val" v-on:input="$emit('input', $event.target.value)">
<input type="button" value="+" @click="value++; $emit('input', value);" />
</div>
`
});
var vm = new Vue({
el:"#app",
data:{
goodsList:[
{
"image":"https://img-mid.csdnimg.cn/release/static/image/mid/ask/435044764056172.jpeg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit",
"goodsName":"惠普（HP）战66 三代 AMD版14英寸轻薄笔记本电脑",
"price":3799,
"count":0
},
{
"image":"https://img-mid.csdnimg.cn/release/static/image/mid/ask/362634764056191.jpeg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit",
"goodsName":"联想英特尔酷睿i5 15.6英寸游戏笔记本电脑",
"price":6999,
"count":0
},
{
"image":"https://img-mid.csdnimg.cn/release/static/image/mid/ask/730134764056195.jpeg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit",
"goodsName":"RedmiBook 14 增强版 全金属超轻薄",
"price":4299,
"count":0
}
]
},
computed: {
total: function () {
var sum = 0;
for (var i = 0; i < this.goodsList.length; i++) {
sum += this.goodsList[i].price*this.goodsList[i].count;
}
return sum;
}
}
});
</script>
</body>
</html>
如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!
