前端开发 Vue.js设计如下界面

需要设计购物车界面，样图如下：

img


需要满足以下功能：
1.选择商品数量，页面下方订单总金额随之变化
2.在输入框内输入数量，订单总金额随之变化
3.页面中红框内为自定义组件
所需图片如下：

img

img

img


给出的数据为：


goodsList:[

    {

          "image":"images/computer1.jpg",

          "goodsName":"惠普（HP）战66 三代 AMD版14英寸轻薄笔记本电脑",

          "price":"3799",

          "count":"0"

    },

    {

          "image":"images/computer2.jpg",

          "goodsName":"联想英特尔酷睿i5 15.6英寸游戏笔记本电脑",

          "price":"6999",

          "count":"0"

    },

    {

          "image":"images/computer3.jpg",

          "goodsName":"RedmiBook 14 增强版 全金属超轻薄",

          "price":"4299",

          "count":"0"

    }

]

你题目的解答代码如下：

<!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>

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

img

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632