书接上回

在上集中我们已经完成了简易穿衣建议组件的开发，并实现了如下效果：

现在我们继续完成购物车组件的开发

购物车组件

首先我们先确定好我们想要实现的功能：一个购物车表格，里面有商品序号，商品名称，商品价格，商品的购买数量，且商品数量可以加减，商品删除以及所有商品最后的总金额。

• 现在我们先把表格在页面上显示出来：

<template>
    <table>
        <thead>
            <th>序号</th>
            <th>商品名称</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
        </thead>
        <tbody>
            <tr >
                <td>1</td>
                <td>笔</td>
                <td>2元</td>
                <td>
                    <button>-</button>
                    <span class="count">1</span>
                    <button>+</button>
                </td>
                <td>
                    <button>删除</button>
                </td>
            </tr>
        </tbody>
    </table>
    <h2>总价格:0元</h2>
</template>

<style lang="css" scoped>
  table{
    margin: 0 auto;
    border: 1px solid #aaa;
    border-collapse: collapse;
  }
  th, td{
    padding: 8px 16px;
    border: 1px solid #aaa;
  }
  .counter{
    margin: 0 5px;
  }
</style>

我们就创建了这样一个表格：因为在我们在上集中已经把App.vue中样式块的scoped除去，把所有子元素的文本都设置为了居中显示，所以这里每一个表格项里的内容都居中了

---

• 现在我们要将表格里的元素都补充完整：

我们在<scpirt>模块中定义一个响应式的数组，数组里存放多个对象，每个对象中都是一个商品及相关信息。这里我们用reactive来进行响应式更新。

tip：

reactive也是需要从Vue库中导入的，同样可以用来创建响应式更新，与ref不同的是： 1.reactive只能包装引用类型的数据，而ref能包装所有类型的数据2.reactive返回的是一个响应式的原始对象，而ref返回的是一个带有value属性的响应式对象，实际数据存储在.value属性中3.对reactive引用的数据进行操作时不用加.value，对ref引用的数据进行访问或修改时需要通过.value，但是在模板中可以直接使用，不用加.vaule

代码如下:

<script setup>
import {reactive} from 'vue'

const shop = reactive(
    [
    {
          id: 1,
          name: '笔',
          price: 2.00,
          count: 1
        },
        {
          id: 2,
          name: '杯子',
          price: 10.00,
          count: 1
        },
        {
          id: 3,
          name: '薯片',
          price: 5.00,
          count: 1
        },
        {
          id: 4,
          name: '衣服',
          price: 100.00,
          count: 1
        },
    ]
)
</script>

---

• 光有了这些数据还不够我们还要将这些数据展示在页面上，所以我们就去到<template>模块里把数据添加上去。

但现在有一个问题，这个表格现在有4行5列，难道我们要一条一条地把数据添加上去吗？当然不用，上集中我们讲到Vue中的一个指令v-if，这集我们再讲Vue中另一个强大的指令v-for

v-for用于渲染列表或重复元素。它可以根据数组、对象或计算出的数据来循环生成 DOM 元素。简单来说，他就是Vue中的一个for循环，但它的用法和我们熟悉的for循环却不一样。

代码如下：

<template>
    <table>
      <thead>
        <th>序号</th>
        <th>书籍名称</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-for="(item,index) in shop" :key="item.id">
          <td>{{ index+1 }}</td>
          <td>{{item.name}}</td>
          <td>{{item.price}}</td>
          <td>
            <button>-</button>
            <span class="counter">{{ item.count }}</span>
            <button>+</button>
          </td>
          <td>
            <button>删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <h2 >总价格：xx元</h2>
  </template>

在这里，我们用v-for循环生成了多个< tr >标签，每个< tr >都有5个表格元素< td >。

在<tr v-for="(item,index) in shop" :key="item.id">中，shop代表要循环生成的数据对象，item代表shop中的每一项，index代表shop中每一项的索引，:key="item.id表示给每个元素都设置一个唯一的标识符，这有助于提升性能。这样我们就得到了这样的效果：

---

• 接着我们还要完善代码实现加减数量，实时更新总价格和删除商品的功能

//<template>部分
<button @click="minus(index)">-</button>
<span class="count">{{ item.count }}</span>
<button @click="add(index)">+</button>
<button @click="del(index)">删除</button>
<h2>总价格:{{ total }}元</h2>

//<scriipt>部分
import {computed,reactive} from 'vue'

const add = (i) => {
  shop[i].count++
}

const minus = (i) => {
  if(shop[i].count>0)
  shop[i].count--
}

const total = computed(() => {
  let sum = 0
  for(let item of shop){
  sum += item.price * item.count
}
  return sum
})

const del = (i) => {
  shop.splice(i,1)
}

我们分别给+， - 和删除按钮都绑定点击事件，因为总价格total要根据商品的数量而响应式更新，所以这里用computed计算属性。这样就得到了如下效果

---

总结

至此我们的简易穿衣建议和购物车组件就做好啦，因为是带大家初识Vue，所以这个项目比较简单，主要是让大家知道一下如何创建一个Vue项目，以及一些Vue中常用的指令，如v-if，v-for。还有Vue中能让我们实现响应式更新数据的属性ref，reactive以及computed等。

后面还会带大家实战难度更大，细节更多的Vue项目，希望能对大家有帮助!!!