结合Vue的插值操作和绑定操作的书籍购物车案例

最新推荐文章于 2026-04-16 21:10:00 发布

原创

最新推荐文章于 2026-04-16 21:10:00 发布 · 384 阅读

收录于

当前文章被以下社区和专栏收录：

本文通过一个书籍购物车案例，详细讲解了Vue中数据绑定、插值操作的实现，包括数量增减、价格格式化、移除商品、购物车清空等关键功能。强调在HTML中避免for循环遍历对象以确保操作正确性，并介绍了如何在methods和computed中定义和使用方法。

书籍购物车案例需求：

1、当购买数量为1的时候，减按钮为disabled

2、当我们点击移除的时候，本行数据属性全部删除

3、使用methods方法使得价格可以显示两个小数点且前面永远保留￥符号

4、当全部书籍购物清单被移除的时候，不显示表格，而是显示购物车为空

注意事项：

1、在实现案例的时候注意分为三个文件实现。分别为CSS，JS，HTML文件

2、在HTML文件实现表单显示数据的时候，不要用for循环遍历对象，不然会导致无法操作数量的情况产生

代码实现：

一、准备工作

1、先写出我们需要的CSS样式，这一部分不展开解释

table{
  border:1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}
th,td{
  padding:8px 16px;
  border: 1px solid #e9e9e9;
  text-align: left;
}
th{
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}

2、写出我们HTML的基本布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
  <div v-if="books.length>=1">
  <table>
    <thead>
    <tr>
      <th></th>
      <th>书籍</th>
      <th>出版日期</th>
      <th>价格</th>
      <th>购买数量</th>

标签