购物车

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

需求1 根据给的初识数据，把购物车页面渲染出来
需求2 点击对应删除按钮，删除对应数据
需求3 当数据没有了，显示一条提示消息

1 内容框遍历数据 v-for="(item,index) in list"

<table class="tb" v-for="(item,index) in list" :key="item.id">

示例帅哥美女走一走模版: 这段代码是 Vue.js 模板语法，它使用了 v-for 指令来循环遍历一个数组 arr 中的每个元素 item，并将每个元素渲染为一个 li 标签。其中，:key="item" 是为了给每个 li 元素提供一个唯一的 key 值，以便 Vue.js 能够高效地跟踪它们的变化。{{ item }} 则是插值表达式，用于将 item 的值插入到 li 标签中。

2 更改数据将固定的数据，渲染成变化的数据 item元素 id名 name名 time名

3 删除按钮添加点击事件绑定index 删除类容的下标

4 v-if 显示与隐藏当list数组的长度等于零时，显示td

5 Vue组件中的methods对象中的一个方法。具体解释如下：

del(index)：定义了一个名为del的方法，接收一个参数index。
this.list：表示当前组件中的list数组。
splice()：是JavaScript中Array对象的一个方法，用于向数组中添加或删除元素。
splice(index, 1)：从数组中删除指定位置（index）的一个元素（1）。
最终效果是从list数组中删除指定位置（index）的一个元素。

代码:

 methods:{
        del(index){
      this.list.splice(index,1)
      }
      }

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <style>
    #app {
      width: 600px;
      margin: 10px auto;
    }
    
    .tb {
      border-collapse: collapse;
      width: 100%;
    }
    
    .tb th {
      background-color: #0094ff;
      color: white;
    }
    
    .tb td,
    .tb th {
      padding: 5px;
      border: 1px solid black;
      text-align: center;
    }
    
    .add {
      padding: 5px;
      border: 1px solid black;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <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="item.id">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.time}}</td>
        <td>
          <button  @click="del(index)">删除</button>
        </td>
      </tr>
      <tr v-if="list.length === 0">
        <td colspan="4">没有数据咯~</td>
      </tr>
    </table>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, name: "奔驰", time: "2020-08-01" },
          { id: 2, name: "宝马", time: "2020-08-02" },
          { id: 3, name: "奥迪", time: "2020-08-03" },
        ]
      },
      methods:{
        del(index){
      this.list.splice(index,1)
      }
      }
      
    })
  </script>
</body>
</html>

购物车案例

购物车

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

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