vue3+ts 纯手写简单的购物车示例 computed属性

小菜鸟码住

于 2022-11-04 15:23:24 发布

阅读量668

点赞数

CC 4.0 BY-SA版权

分类专栏： vue3+ts 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/hfyldx/article/details/127689816

<template>
  <div>
    <table border style="width: 800px">
      <thead>
        <tr>
          <th>名称</th>
          <th>数量</th>
          <th>单价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr :key="index" v-for="(item, index) in data">
          <td align="center">{
  
  { item.name }}</td>
          <td align="center">
            <button @click="addAndSub(item, false)">-</button>{
  
  { item.num
            }}<button @click="addAndSub(item, true)">+</button>
          </td>
          <td align="center">{
  
  {item.num *item.price }}</td>
          <td align="center"><button @click="del(index)">删除</button></td>
        </tr>
      </tbody>
      <tfoot>
        <td></td>
        <td></td>