运用v-for指令完成购物车小案例

最新推荐文章于 2023-09-09 22:10:29 发布

”╰+换悸メo

最新推荐文章于 2023-09-09 22:10:29 发布

阅读量394

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_48298312/article/details/128660349

版权

该博客介绍了一个使用Vue.js完成的购物车小案例，包括商品展示和删除功能。当购物车无数据时，会显示提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目标: 完成商品浏览和删除功能, 当无数据给用户提示

根据给的初始数据, 把购物车页面铺设出来

点击对应删除按钮, 删除对应数据

当数据没有了, 显示一条提示消息

<template>
  <div id="app">
    <table class="tb">
      <tr>
        <th>编号</th>
        <th>品牌名称</th>
        <th>创立时间</th>
        <th>操作</th>
      </tr>
      <!-- 循环渲染的元素tr -->
      <tr v-for="(item,index) in list" :key="index">
        <td>{
   {item.id}}</td>
        <td>{
   {item.name}}</td>
        <td>{